图片滑动的时候，怎么能有缓冲效果啊？怎么判断向左滑，还是向右滑？
0
悬赏园豆：50
[已关闭问题]
关闭于 2014-07-18 16:09
图片滑动的时候，怎么能有缓冲效果啊？怎么判断向左滑，还是向右滑？
<!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <title>滑动的时候，怎么能有缓冲效果啊？怎么判断向左滑，还是向右滑？</title> <link rel="stylesheet" href="css/edg.css"> </head> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <style> .box{width:100%; overflow:hidden; height:180px; position:relative; margin:20px 0;} .box ul{ height:180px; width:1000px;} .box ul li{width:150px; height:180px; float:left; padding-left:10px;} .box ul li img{width:150px; height:180px;} </style> <script> $(function(){ //触摸滑动回弹效果 var oBox = $('.box ul'); var len = oBox.find('li').length; var w = oBox.find('li').width()+10; oBox.width(len*w); var clientW = $(window).width(); var disX = 0; var endX = 0; oBox.bind('touchstart',function(e){ disX = event.touches[0].pageX+disX; //获取触点X坐标 oBox.css('webkitTransition',''); }); oBox.bind('touchmove',function(e){ e.preventDefault(); //阻止默认行为，兼容其他浏览器 endX = event.touches[0].pageX-disX; //获取不断移动的X坐标 oBox.css('webkitTransform','translate3d('+endX+'px,0,0)'); }); oBox.bind('touchend',function(){ oBox.css('webkitTransition','all 0.3s linear'); }); }) </script> <div class="box"> <ul> <li><img src="images/1.jpg" /></li> <li><img src="images/2.jpg" /></li> <li><img src="images/3.jpg" /></li> <li><img src="images/6.jpg" /></li> <li><img src="images/7.jpg" /></li> <li><img src="images/8.jpg" /></li> </ul> </div> </body> </html>
所有回答(1)
