H5防QQ中的天气功能页面中的十二星座切换效果

今天用手机QQ看了下，突然看下QQ天气十二星座的切换效果，于是兴致来潮，就想了一下要怎么实现。

QQ天气效果：

我模拟的效果：

没有在手机端去实现，手机端结合touchstart 、 touchmove 、touchend三个事件及touch[0]事件对象获取手势的坐标然后判断方向，应该也可以去实现的。我监听了键盘事件来模拟触摸事件，然后实现了类似的效果，不过向右移动的时候还是有点小问题，留着有兴趣的人自己去修改。

代码如下：

<!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>
    <style>
        *{padding:0;margin:0;}
        .touchBox{width:500px;height:255px;margin:40px auto;padding:50px 0;overflow: hidden;}
        .touchBox .box{position:relative;width:1200px;height:150px;margin-top:50px;}
        .touchBox .box ul li{float:left;width:100px;height:150px;font-size:30px;color:#fff;line-height:150px;text-align:center;box-shadow: 0 0 3px #999;border-radius:5px;list-style:none;}
        .touchBox .box ul .scale0{position:relative;z-index:0;transform: scale(1);transition:all .5s ease-in-out;}
        .touchBox .box ul .scale1{position:relative;z-index:1;transform: scale(1.2);transition:all .5s ease-in-out;}
        .touchBox .box ul .scale2{position:relative;z-index:2;transform: scale(1.5);transition:all .5s ease-in-out;}
    </style>
</head>
<body>
    <div class="touchBox">
        <button class="prev">向左边</button>
        <button class="next">向右边</button>
        <div class="box">
            <ul>
                <li style="background:red;" class="scale0">1</li>
                <li style="background:blue;" class="scale1">2</li>
                <li style="background:yellow;" class="scale2">3</li>
                <li style="background:green;" class="scale1">4</li>
                <li style="background:pink;" class="scale0">5</li>
                <li style="background:orange;" class="scale0">6</li>
                <li style="background:rgb(13, 84, 131);" class="scale0">7</li>
                <li style="background:#50883d;" class="scale0">8</li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="../Util/jquery-1.11.3.min.js"></script>
<script>
    (function(select){
        var box = $(select);
        var movebox = box.find(".box");
        var ul = box.find("ul");
        var li = box.find("li");
        var width = li.width();
        var prevBtn = box.find(".prev");
        var nextBtn = box.find(".next");

        //单击向左按钮
        prevBtn.click(function(){
            moveLeft();
        });

        //单击向右按钮
        nextBtn.click(function(){
            moveRight();
        });

        // ul.prepend(ul.find("li:last"));
        // movebox.css({"left":"-" + width + "px"});
        //向左边移动方法
        function moveLeft(){

            //向左边移动
            movebox.animate({"left": "-" + width + "px"},500,function(){
                ul.append($(this).find("li").eq(0));    //将第一个节点追加到最后
                movebox.css({"left":"0px"});    //移动之后要回复left:0
            });
                //放大动画效果，其实就是想scale1 、scale2的三个元素位置向右边移动
                var mid = box.find("li.scale2");
                box.find("li").removeAttr("class").addClass("scale0");
                mid.removeClass("scale2").addClass("scale1")
                    .next().removeClass("scale1").addClass("scale2")
                    .next().removeClass("scale0").addClass("scale1");
        }

        //向右边移动方法
        function moveRight(){

            //向右边移动
            movebox.animate({"left": width + "px"},500,function(){
                ul.prepend($(this).find("li:last"));    //将第一个节点追加到最后
                movebox.css({"left":"0px"});    //移动之后要回复left:0

            });

            //放大动画效果，其实就是想scale1 、scale2的三个元素位置向右边移动
            var mid = box.find("li.scale2");
            box.find("li").removeAttr("class").addClass("scale0");
            mid.removeClass("scale2").addClass("scale1")
                .prev().removeClass("scale1").addClass("scale2")
                .prev().removeClass("scale0").addClass("scale1");
        }

        //键盘事件监听
        (function(){
            $(document).keydown(function(event){
                var keyNum = event.which;   //获取键值
                switch(keyNum){  //判断按键
                case 37: //左
                    moveLeft();
                    break;
                case 39:    //右
                    moveRight();
                    break;
                default:
                    break;
                }
            });
        }());
    })(".touchBox");
</script>