发新贴  快速回复

手机端的图片滑动怎么实现呀??求大神帮忙看看代码。。

yzf851348507
2014-07-18 11:28
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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"  />
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}

.box{width:100%; height:150px; position:relative; overflow:hidden; margin-top:40px;}
.box ul{display:-webkit-box; position:absolute; left:0; top:0;}
.box ul li{width:120px; height:150px; overflow:hidden; margin-right:5px;}
.box ul li img{width:120px; height:150px;/* -webkit-transform:translate(0,0); -webkit-transition:all .5s;*/}
</style>
</head>

<body>

<div class="box">
    <ul>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
        <li><img src="img/1.jpg"></li>
        <li><img src="img/2.jpg"></li>
        <li><img src="img/3.jpg"></li>
        <li><img src="img/4.jpg"></li>
        <li><img src="img/5.jpg"></li>
    </ul>
</div>
<script src="jquery-1.9.1.min.js"></script>
<script>
$(function(){
    var oUl = $('.box ul');
    var disX = 0;
    var i = 0;
    var endX = 0;
    var left = 0;
    
    var flag = false;
    oUl.bind('touchstart',function(){
        var touchs = event.touches[0];
        //alert(touchs.pageX);
        disX = touchs.pageX;
        left = parseInt(oUl.css('left'));
        
        oUl.bind('touchmove',function(){
            document.title=i++;
            var touchs = event.touches[0];
            event.preventDefault();
            endX = touchs.pageX-disX;
            oUl.css({'left':endX+left+'px'});
    
            //oUl.css({'webkitTransition':'all .4s'});
            /*if(flag){
                oUl.css({'webkitTransition':'all .4s'});
            }*/
        });
        
        oUl.bind('touchend',function(){
            //document.title='我抬起了';
            
                /*oUl.stop().animate({left:endX+left+'px'},800,function(){
                    document.title='我抬起了';
                });*/
            oUl.css({'webkitTransition':'all .4s'});
            oUl.off('touchmove touchend');
        });
        
        /*oUl.bind('webkitTransitionEnd',function(){
            oUl.css({'webkitTransition':''});
        })*/
        //return false;
    });
});
</script>
</body>
</html>


miaow
 这给你写了一个, 拿去用吧. 要用谷歌浏览器或者手机看,css3做的.
2014-07-18 14:54  回复本帖
yzf851348507
在我这边看,怎么不行啊??而且你这个是每次只切换一张图片而已的,,我要的是 类似无缝滚动那种,在手机上滑动。。
2014-07-18 16:07  回复本帖
创美易-miaov
forum.php?mod=redirect&goto=findpost&pid=27846&ptid=8799
在我这边看,怎么不行啊??而且你这个是每次只切换一张图片而已的,,我要的是 类似无缝滚动那种,在手机 ...

呵呵~~~~手机上的本来就是切换一个 图片而已,要说无缝滚动的,原理和pC端上的一样的。如果你会PC上的无缝滚动就自己改改吧,不会也没时间帮你完善了。哈哈~~~

2014-07-18 20:28  回复本帖
yzf851348507
像 九游 http://a.9game.cn/dtcq/  这个  一样的。和无缝滚动还是有很大区别的。。我只是说类似无缝,但并不是pc端的无缝滚动。
2014-07-19 09:50  回复本帖
yzf851348507
forum.php?mod=redirect&goto=findpost&pid=27849&ptid=8799
呵呵~~~~手机上的本来就是切换一个 图片而已,要说无缝滚动的,原理和pC端上的一样的。如果你会PC上的无 ...

[table=98%]
[tr][td]像 九游 http://a.9game.cn/dtcq/  这个  一样的。和无缝滚动还是有很大区别的。。我只是说类似无缝,但并不是pc端的无缝滚动。[/td][/tr]
[/table]
2014-07-19 09:50  回复本帖
miaow
forum.php?mod=redirect&goto=findpost&pid=27859&ptid=8799


这个哪里是什么无缝滚动,真是人才....普通的图片滑动直接用swipeleft 左滑,swiperight右滑事件, 滑动的时候设一个开关判断. 一个计时器,滑动多少距离.

2014-07-19 11:32  回复本帖
yzf851348507
forum.php?mod=redirect&goto=findpost&pid=27861&ptid=8799
这个哪里是什么无缝滚动,真是人才....普通的图片滑动直接用swipeleft 左滑,swiperight右滑事件, 滑动的时 ...

说都是这么说了。。。大神可否来个demo给小弟研究研究?? 
2014-07-19 13:58  回复本帖
miaow
forum.php?mod=redirect&goto=findpost&pid=27863&ptid=8799
说都是这么说了。。。大神可否来个demo给小弟研究研究??

  给你开个头,你自己完善一下吧
2014-07-19 17:36  回复本帖
创美易-miaov
这个不错
2014-07-20 09:43  回复本帖
登录 后才可以发表回复