首页 新闻 赞助 找找看

图片滑动的时候,怎么能有缓冲效果啊?怎么判断向左滑,还是向右滑?

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>
当然感的主页 当然感 | 初学一级 | 园豆:43
提问于:2014-05-23 15:58
< >
分享
所有回答(1)
0
艾艾12 | 园豆:216 (菜鸟二级) | 2014-05-27 22:07
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册