炫酷的滑动效果

HTML

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="renderer" content="webkit">
    <meta charset="UTF-8">
    <title>炫酷滑动</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
    <div class="block">
        <div class="all block_0"></div>
        <div class="all block_1"></div>
        <div class="all block_2"></div>
        <div class="all block_3"></div>
        <div class="all block_4"></div>
    </div>
    <ul class="btn">
        <li class="on"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="arrow">«</div>
</body>
</html>
<script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>

* {padding:0; margin: 0;}
html,body{ width:100%; height:100%; overflow:hidden;}
ol,ul{list-style:none;}
.block {display:block; width:100%; height:100%; overflow:visible;transition:transform 1s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
.all {display:block; width:100%; height: 100%; overflow:visible; position: relative;}
.block_0 {background-color:#5bc0de;}
.block_1 {background-color:#5cb85c;}
.block_2 {background-color:#337ab7;}
.block_3 {background-color:#f0ad4e;}
.block_4 {background-color:#d9534f;}

.add_block_0{ transform:translateY(0);-webkit-transform:translateY(0);}
.add_block_1{ transform:translateY(-100%);-webkit-transform:translateY(-100%);}
.add_block_2{ transform:translateY(-200%);-webkit-transform:translateY(-200%);}
.add_block_3{ transform:translateY(-300%);-webkit-transform:translateY(-300%);}
.add_block_4{ transform:translateY(-400%);-webkit-transform:translateY(-400%);}

.btn {width:14px;position:fixed;right:4%;top:50%;}
.btn li{ width:14px;height:14px;cursor:pointer;text-indent:-9999px;border-radius:50%;-webkit-border-radius:50%;margin-bottom:12px; background:#BD362F;text-align:center; color:#fff; onsor:pointer;}
.btn li.on{ background:#fff}
.arrow{ opacity:1;animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;-webkit-animation:arrow 3s cubic-bezier(0.5,0,0.1,1) infinite;transform:rotate(-90deg);-webkit-transform:rotate(-90deg); position:absolute;bottom:10px;left:50%;margin-left:-30px;width:60px;height:60px;border-radius:100%;-webkit-border-radius:100%;line-height:60px;text-align:center;font-size:20px;color:#fff;border:1px solid #fff;cursor:pointer;overflow:hidden;}
.arrow:hover{ animation-play-state:paused;-webkit-animation-play-state:paused;}
@keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }
@-webkit-keyframes arrow{ %0,%100{bottom:10px; opacity:1;} 50%{bottom:50px; opacity:.5} }

JS（JQuery）

$(function(){
    var i = 0;
    var $btn = $('.btn li'), $arrow = $('.arrow');

    /*当前页面赋值*/
    function up() {
        if(++i == $btn.length) {
            i=0;
        }
    }

    function down() {
        if(--i < 0) {
            i = $btn.length-1;
        }
    }

    /*页面滑动*/
    function run(){
        console.log(i);
        console.log("add_block_"+i);
        $btn.eq(i).addClass('on').siblings().removeClass('on');
        $(".block").attr("class","block");
        $(".block").addClass(function(){return "add_block_"+i;});
    };

    /*右侧按钮点击*/
    $btn.each(function(index) {
        $(this).click(function(){
            i = index;
            run();
        })
    });

    /*翻页按钮点击*/
    $arrow.one('click',go);
    function go(){
        up();run(); 
        setTimeout(function(){$arrow.one('click',go)},1000)
    };
});

猜你喜欢