移动端 mobile 滑动

monica_jes 发布于 2013/08/15 10:06
阅读 305
收藏 0

需要的效果:如上图,在手机上,手指滑动导航栏,显示出被隐藏的导航栏。
我使用的方法:出现的问题,在手机自带的浏览器里面,链接不容易被点击上,(点击焦点下移到文字的下方。经过修改样式给a加上display:block,width,height,padding都不起作用。去掉js的touchstart函数,发现链接好点了。所以在想是不是因为js加了位移导致焦点的位置下移。不知道大家有没有这个经验,求分享)
<div class="specialtopic_menu_w">
     <div id="moveid" style="width: 777px;">
                 <a class="on" href="/h">全部</a>   
                  <a href="/h/10/0">热点</a>
                  <a href="/h/20/0">生活</a>       
                  <a href="/h/30/0">展业</a>
                  <a href="/h/40/0">保险</a> 
                  <a href="/h/60/0">财经</a>  
                  <a href="/h/89/0">IT互联网</a>  
                  <a href="/h/90/0">文体娱乐</a>
      </div>

     </div>

<script type="text/javascript">

var isdrag=false;   
var tx,x,ty,y;    
$(function(){   
    document.getElementById("moveid").addEventListener('touchstart',touchStart);  
    document.getElementById("moveid").addEventListener('touchmove',touchMove);
    document.getElementById("moveid").addEventListener('touchend',function(){  
        isdrag = false;  
    });
});
function touchStart(e){   
   isdrag = true;
   e.preventDefault();
   tx = parseInt($("#moveid").css('left'));   
   x = e.touches[0].pageX;
}   
function touchMove(e){   
  if (isdrag){
   e.preventDefault();
       var n = tx + e.touches[0].pageX - x;
       $("#moveid").css("left",n);  
   }  
}   

</script>

尝试mobilejquery的方法,链接好点击,焦点位置正确,但是会给html文档自动加很多的css,扰乱了html。不知道这方面有没有能解决的办法。

在网上看到了一个swipejs库,照样会有焦点下移的问题。而且是手指一滑动就滑动一屏幕。而我这里是a链接,每个a链接的文字多少不确定,所以没法确定每屏幕放置多少个a链接。这种方法也是不合适的。


文字很多,求高手们耐心看完。谢谢!


加载中
返回顶部
顶部