手机端图片左右滑动效果实现
来源:互联网 发布:java virtual 编辑:程序博客网 时间:2024/04/29 22:21
起初我想尝试用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在移动设备的触摸事件中尤其重要。
效果图如下:
- 手机端图片左右滑动效果实现
- 手机端滑动实现页面左右切换效果
- 使用ViewFlipper实现图片左右滑动效果
- Android实现图片左右滑动效果
- android 实现图片左右滑动效果
- android实现图片左右滑动效果:viewpager
- Android-手势-实现图片左右滑动效果
- javascript 手机端左右滑动效果
- h5用swiper结合angularjs实现手机浏览器左右滑动切换图片的效果
- 手机web图片左右滑动动画效果分享
- h5手机浏览器左右滑动切换图片效果
- 移动端图片左右滑动效果
- Android 图片左右滑动效果
- 页面图片浮动左右滑动效果实现案例
- 利用viewpager实现图片左右循环滑动效果
- android 左右滑动效果实现
- Android实现左右滑动效果
- Android实现左右滑动效果
- 【转】协议适配器错误(ORA-12560: TNS:protocol adapter error)
- oracle 10g sqlplus,PL SQL Developer,character中文乱码解
- Tomcat Can't load AMD 64-bit .dll on a IA 32
- VB.NET&C#&VB较量
- 【转】 IntelliJ Idea 常用快捷键列表
- 手机端图片左右滑动效果实现
- 图像处理(五)双指数磨皮
- 【转】C++类的实例分布
- 【转】C++成员函数的内存分配问题
- 【WC】成都七中集训
- 【转】C++的64位整数
- Jquery 的height()方法在jsp中获取的高度问题
- 【转】更改Windows系统底色以保护视力
- 【转】再谈重入锁--ReentrantLock