今天用手机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>