如果实现HTML5在手机上的图片划动效果

图片说明
比如像京东的页面这样,这些图片在手机上是可以左右滑动,但是页面上不会有滑动条显示的,我有的思路大概是这样


<div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" >
        <div style="width: 600px;">
            <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
        </div>
    </div>

但是这样的话会出现一个滑动条,
还有一种就是写touchStart,这种事件的方法,但是写这种事件我只能做到手指划动多少,图片移动多远距离,做不出来向京东展示商品那样那种很顺畅的感觉,这一块要怎么实现, 有没有大神给些代码或是给点思路,或是提供一下第三方插件也行

我所能实现的代码如下, 但是都不太理想:

 <!DOCTYPE html>
<html>
 <head> 
  <title>商品查询</title> 
  <meta name="author" content="" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> 
  <meta name="apple-mobile-web-app-capable" content="yes" /> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
  <meta name="format-detection" content="telephone=no" /> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
   <script type="text/javascript">

   var  startX = 0,moveX = 0;c = 0;
   var isFirst = 0;
        $(function() {

            function touchStart(e){
                isFirst ++;
                startX = e.touches[0].pageX;
            }

            function touchMove(e){
                moveX = e.touches[0].pageX;
                if(isFirst == 1)
                    c = moveX - startX;
                else{
                    c = c + (moveX - startX);
                    startX = moveX;
                }

                $('#spText').html('移动' + (moveX - startX) + '总偏'+c);
                $('#abc')[0].style.webkitTransform = 'translate(' + c + 'px)';
            }

            $('#abc')[0].addEventListener("touchstart",touchStart,false);
            $('#abc')[0].addEventListener("touchmove",touchMove,false);
        })
    </script>

 </head> 
 <body id="body"> 

    <div style="overflow: hidden;background: #000;" >
        <div style="width: 600px;" id="abc">
            <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
        </div>
    </div>

    <div style="overflow: hidden;background: #000;overflow-x: auto;z-index: 1;margin-top: 10px;" >
        <div style="width: 600px;">
            <div style="display: inline-block; width: 100px;height: 100px;background:#fff; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:blue; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:green; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:red; "></div>
            <div style="display: inline-block; width: 100px;height: 100px;background:yellow; "></div>
        </div>
    </div>

     <span id="spText">X轴移动大小:0</span>


 </body>
</html>

3个回答

谢谢楼上2位, 我其实想要的效果是showbo给的demo里面的maxPoint效果,再次感谢,谢谢

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问