css
html
js
說明:其實這個跟fullpage是類似的,他實現(xiàn)的是滾動,我寫的是點擊滾動起來.
代碼粘貼上:
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge">
? ? <title>Document</title>
? ? <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
? ? <style>
? ? ? ? body,
? ? ? ? html {
? ? ? ? ? ? overflow: hidden;
? ? ? ? ? ? height: 100%;
? ? ? ? ? ? padding: 0;
? ? ? ? ? ? margin: 0;
? ? ? ? }
? ? ? ? .box {
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? ? ? .aa {
? ? ? ? ? ? background-color: rgb(27, 188, 155);
? ? ? ? }
? ? ? ? .bb {
? ? ? ? ? ? background-color: rgb(75, 191, 195);
? ? ? ? }
? ? ? ? .cc {
? ? ? ? ? ? background-color: rgb(123, 170, 190);
? ? ? ? }
? ? ? ? .dd {
? ? ? ? ? ? background-color: rgb(255, 153, 0);
? ? ? ? }
? ? ? ? .heights span {
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? display: inline-block;
? ? ? ? ? ? width: 100%;
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? $(function () {
? ? ? ? ? ? $(".heights").height($(document).height());
? ? ? ? ? ? $(".heights").last().addClass("on");
? ? ? ? ? ? $(document).on('click', '.heights span', function () {
? ? ? ? ? ? ? ? $(this).parents(".heights").addClass("on");
? ? ? ? ? ? ? ? $(this).parents(".heights").hide();
? ? ? ? ? ? ? ? $(this).parents(".heights").next(".heights").show();
? ? ? ? ? ? ? ? $(".heightss").show();
? ? ? ? ? ? });
? ? ? ? ? ? $(document).on('click', '.box .on', function () {
? ? ? ? ? ? ? ? $(this).hide();
? ? ? ? ? ? ? ? $(this).prev(".heights").show();
? ? ? ? ? ? ? ? $(this).removeClass("on");
? ? ? ? ? ? ? ? $(".heightss").addClass("on");
? ? ? ? ? ? });
? ? ? ? })
? ? </script>
</head>
<body>
? ? <div class="box">
? ? ? ? <div class="heights aa">
? ? ? ? ? ? <span>我是按鈕1</span>
? ? ? ? </div>
? ? ? ? <div class="heights bb">
? ? ? ? ? ? <span>我是按鈕2</span>
? ? ? ? </div>
? ? ? ? <div class="heights cc">
? ? ? ? ? ? <span>我是按鈕3</span>
? ? ? ? </div>
? ? ? ? <div class="heights heightss dd">
? ? ? ? ? ? <span class="">我是按鈕4</span>
? ? ? ? </div>
? ? </div>
</body>
</html>
