手机端图片左右滑动效果实现

Dear 丶 2022-08-20 02:16 278阅读 0赞

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得不放弃使用。接着我又尝试用zepto.js，但是由于页面很大部分已经依赖了jQuery，jQuery和zepto.js存在冲突，我本打算解决冲突，让两者共存，但是最后还是放弃了，因为觉得引入两者实在是太冗余。所以我最后采用了js原生的touch事件。通过比较前后手指在页面中的坐标之差来判断向左滑动还是向右滑动，然后移动包括图片的元素ul的left值。

这里用到了QWeb，xml文件内容如下：

<span style="white-space:pre">		</span><div class="visible-xs mb-box">
                            <div class="slider">
                                <ul class="clearfix slider-wrap">
                                    <t t-foreach="product.product_template_image_urls" t-as="image_url">
                                        <li>
                                            <a href="javascript:;" class="pic">
                                                <img t-att-src="image_url.url_middle"/>
                                            </a>
                                        </li>
                                    </t>
    
                                </ul>
                                <ul class="slide-nav">
                                    <t t-foreach="product.product_template_image_urls" t-as="image">
                                        <t t-if="image_index == 0">
                                            <li class="selected"></li>
                                        </t>
                                        <t t-if="image_index > 0">
                                           <li></li>
                                        </t>
                                    </t>
                                </ul>
                            </div>
    
                        </div>

对应的js内容如下：

function PicSliser() {
            return new PicSliser.prototype.init();
        }
        PicSliser.prototype = {
            init: function() {
                var self = this;
                self.$parent = $('.slider');
                self.$ul = self.$parent.find('.slider-wrap');
                self.picNum = self.$ul.find('li').length;
                self.width = self.$parent.width();
                self.$ul.find('li').css('width',self.width);
                self.$ul.css('width', self.width * self.picNum);
                self.index = 0;
                self.picTranslate();
            },
            move: function() {
                var self = this;
                self.$ul.animate({
                    'left':-self.width * self.index
                },400, 'swing');
                $('.slide-nav').find('li').eq(self.index)
                        .addClass('selected').siblings().removeClass('selected');
            },
            moveNext: function() {
                var self = this;
                if(self.index >= self.picNum-1) {
                    return;
                }
                self.index++;
                self.move();
    
            },
            moverPre: function() {
                var self = this;
                if(self.index <= 0) {
                    return;
                }
                self.index--;
                self.move();
            },
            picTranslate: function() {
                var self = this,
                    startPosition,
                    endPOsition,
                    deltaX,
                    deltaY;
                self.$ul.find('.pic').bind('touchstart', function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    startPosition = {
                        x: touch.pageX,
                        y: touch.pageY
                    }
                }).bind('touchmove', function(e) {
                    var touch = e.originalEvent.targetTouches[0];
                    endPosition = {
                        x: touch.pageX,
                        y: touch.pageY
                    };
                    deltaX = endPosition.x - startPosition.x;
                    deltaY = endPosition.y - startPosition.y;
                }).bind('touchend', function(e) {
                    if(deltaX < 0) {
                        self.moveNext();
                    } else if(deltaX > 0) {
                        self.moverPre();
                    }
                })
    
            }
        }
        PicSliser.prototype.init.prototype = PicSliser.prototype;
        var picSliser = new PicSliser();

总结：

基本触摸事件：  
1. touchstart ：手指放在一个DOM元素上。  
2. touchmove ：手指拖曳一个DOM元素。  
3. touchend ：手指从一个DOM元素上移开。  
每个触摸事件都包括了三个触摸列表：  
1. touches ：当前位于屏幕上的所有手指的一个列表。  
2. targetTouches ：位于当前DOM元素上的手指的一个列表。  
3. changedTouches ：涉及当前事件的手指的一个列表。  
  
在取得DOM元素上的targetTouches时，注意不能直接使用event.targetTouches,而是要使用event.originalEvent。这里event和originalEvent的区别在于：event在这里是被jQuery包装后的事件对象，jQuery事件对象暴漏了一个originalEvent属行用来访问原生的js事件对象。由于在不同的浏览器环境和事件类型中对应的originalEvent并不总是相同，所以需要直接使用原生的事件对象，originalEvent在移动设备的触摸事件中尤其重要。

效果图如下：

![Center][]

[Center]: /images/20220731/aaafa722e25d48c2b0733f0e0aa2845d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，278人围观）

还没有评论，来说两句吧...

相关阅读

相关 android 实现波纹效果+图片左右无限滑动缩放效果

项目中用到的 ,记录下.说不定下次又用到了.就提取出来了. ![538831-20160914150054633-711761945.gif][] 录制效果一般,将就

ゝ一世哀愁。/ 2023年10月10日 08:04/ 0 赞/ 7 阅读

相关苹果手机可左右滑动的bug

> 今日在开发微信小程序的时候，发现苹果手机在某些页面可以左右滑动，出现空白的情况（安卓没有）。 > ![在这里插入图片描述][watermark_type_ZmFuZ3p

柔情只为你懂/ 2023年10月04日 13:31/ 0 赞/ 29 阅读

相关小程序-左右滑动效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

Dear 丶/ 2022年10月06日 00:57/ 0 赞/ 29 阅读

相关 html实现图片自动滚动效果,js实现图片左右滚动效果

需求：页面显示教师信息列表，列表中每一条数据显示图片滚动插件，每张图片的长宽及长宽比例各不相同。前提条件：美工把静态页面写好 HTML代码： @using Models

曾经终败给现在/ 2022年10月05日 12:44/ 0 赞/ 328 阅读

相关微信小程序实现卡片左右滑动效果

前言快放假了，人狠话不多，啥也不说了。先看效果图。思路从上面的效果图来看，基本的需求包括：左右滑动到一定的距离，就向相应的方向移动一个卡片的位置。

向右看齐/ 2022年10月01日 11:47/ 0 赞/ 836 阅读

相关手机端图片左右滑动效果实现

起初我想尝试用jQuery Mobile的swipeleft和swiperight,可以实现手势左右滑动的效果，但是jQuery Mobile对页面的其它部分影响很大，所以不得

Dear 丶/ 2022年08月20日 02:16/ 0 赞/ 279 阅读

相关仿探探图片卡左右滑动效果

效果图： ![Center][] 1、实现如图效果 2、根据接口请求数据并展示 3、实现如效果视频的切换效果 4、换一批可以切换随机切换一批电影数据添加依赖

布满荆棘的人生/ 2022年06月03日 01:44/ 0 赞/ 270 阅读

相关 Android实现左右滑动指引效果

　　本文介绍Android中实现左右滑动的指引效果。　　关于左右滑动效果，我在以前的一篇博文中提到过，有兴趣的朋友可以查看：[http://www.cnblogs.c

古城微笑少年丶/ 2021年12月22日 15:05/ 0 赞/ 432 阅读

相关 Android 使用ViewPager实现左右循环滑动图片

ViewPager这个小demo实现的是可以左右循环滑动图片，下面带索引，滑到最后一页在往右滑动就要第一页，第一页往左滑动就到最后一页，先上效果图，用美女图片是我一贯的作风，呵

墨蓝/ 2021年12月07日 11:13/ 0 赞/ 391 阅读

相关 vue移动端实现手机左右滑动入场动画

app.vue <template> <div id="app"> <transition :name="transitionName">

桃扇骨/ 2021年09月29日 15:02/ 0 赞/ 394 阅读