jquery手机触屏触摸左右滑动、上下滚动问题，急！

2015-08-06 04:23:52 2.3k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

私彩视频开奖动画直播源码内部核心技术解析及修改可增加后台操控-持续更新文章! 其实在此很感谢能做出H5开奖系统的码农们，而我本人也喜欢分解此类的东西。因为特殊原因，该东西本人就不做图片展示，以防他人商业化。借用开奖摇奖代码首先分解首页index文件。代码如下：（后面持续在原有的作品上添加后台操作）代码里写的//.....是我的注明代码的所需。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;... 阅读详情

手机浏览器的网页，页面中间有一块区域的内容存在多个菜单项，一屏显示不全，需要左右滑动效果，该效果已实现，但是发现在该区域内手指只能左右滑动，上下滑动没反应，请问在此区域内怎么实现可以左右滑动又不影响页面上下滚动？

效果如图：

代码如下：





        var speed = 200;

        var x1,x2, direct;



        function transformBox(obj,value,time){

            var time=time?time:0;

            transl="translate3d("+value+"px,0,0)";

            obj.css({'-webkit-transform':transl,'-webkit-transition':time+'ms linear'});

        }



        /*功效滑动效果 begin */

        var efficacySlider = $('#scroll_efficacy');//滑动容器

        var ef_width=0;	//滑动元素的总宽度

        var offset = 0; //滑动的宽度

        var e_cliWidth = document.body.clientWidth; //手机屏幕宽度



        //计算所有标签的总长度

        $('#scroll_efficacy').find('a').each(function(index){

            ef_width += parseInt($(this).css('margin-left')) + parseInt($(this).css('margin-right')) + $(this).width();

        });



        efficacySlider.css({'width':Math.ceil(ef_width/e_cliWidth)*e_cliWidth+ 'px'}); //设置滑动容器宽度



        efficacySlider.on('touchstart', function(e){

            if(x2) x2 = undefined;

            x1 = e.touches[0].pageX;

        }).on('touchmove', function(e){

            e.preventDefault();

            x2 = e.touches[0].pageX;

        }).on('touchend', function(e) {

            if(x1 > x2) direct = 'left';

            else direct = 'right';

        }).swipe(function(e){

            var offset_temp = offset + x2 - x1;



            if(offset_temp > 0){

              offset = 0;

            }else if(Math.abs(offset) + e_cliWidth >= ef_width && direct == 'left'){

              offset = offset;

            }else{

              offset = offset_temp;

            }



            transformBox(efficacySlider, offset, speed);

        });