文章出自本人博客:http://www.tarobjtu.com/blog/slide-show-touch-move/
最近项目中多处用到slideshow(图片浏览)功能,但不同项目客户希望的实现方式不同,功能不一,如果在现有jQuery plugin插件上修改的话,一来会有未知bug,二来改他人代码比自己重写还费事,索性自己写一个。想添加什么功能由自己。
其中一个项目需要支持PC与智能机,这牵涉出两个问题,一是跟随屏幕尺寸变更问题,二是触摸屏滑动实现切换图片功能。
跟随屏幕尺寸变更问题
共有3种类型尺寸,PC端屏幕宽度960px,手机竖屏320px,手机横评480px。页面布局方面用CSS3的media query实现尺寸调整。JS端实在没办法,只能通过监听浏览器窗口尺寸变化实现横竖屏切换时,slideshow的正常运转。
触摸屏滑动实现切换图片功能
如果不熟悉解智能手机(iOS与Android)浏览器触摸事件的话,可以先阅读这两篇文章:
1、《针对多点触控浏览器进行的开发》(翻译的比较僵硬,有些术语不够专业,但好文章一枚)
2、《基于JavaScript touch事件的自定义按钮示例》
以下贴出我的代码实现:
// $display : 图片的显示窗口 // .banner img : 图片本身 $display.on('touchstart', '.banner img', function(e){ var touch = e.originalEvent, startX = touch.changedTouches[0].pageX; $display.on('touchmove', function(e){ e.preventDefault(); touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0]; if(touch.pageX - startX > 10){ $display.off('touchmove'); reflash(function(){ var next = index.prev(); animate(next, 'prev'); }); } else if (touch.pageX - startX < -10){ $display.off('touchmove'); reflash(function(){ var next = index.next(); animate(next, 'next'); }); } }); /* return false; */ }).on('touchend',function(){ $display.off('touchmove'); });
触摸事件与鼠标点击事件
项目中的图片包含一个链接,当用户操纵图片时,到底是触发mouseClick事件还是touchStart,touchMove,touchEnd事件成为一个困惑。iOS与Android事件的运行机制避免了这个问题。
鼠标点击事件在触摸事件touchStart,touchEnd事件触发之后触发。两个方法可以阻止鼠标事件触发:
- 不执行与事件关联的默认动作。即使用return false; 或者event.preventDefault();但此方法将使图片失去打开链接功能。
- 当touchMove被执行时,鼠标点击事件mouseClick会被自动取消。