wap手机图片滑动切换特效无css3元素js脚本编写资源-CSDN文库

142 浏览量 2020-12-09 23:10:16 上传评论收藏 84KB PDF 举报

手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所有下定决心自己做一个，谁知出现了很多的问题，其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就简单介绍一下遇到的问题和解决的方法；问题一：给图片加上链接后，在拖动的时候总是跳到其他页面；　　问题根源主要是不能判断是点击还是拖动，手机事件一般顺序是 touchstart-》mousedown-》mousemove-》touc 【标题】: "wap手机图片滑动切换特效无css3元素js脚本编写" 【描述】: 在开发wap手机图片滑动切换特效时，开发者常常面临挑战，尤其是当需要兼容不支持css3的设备时。通常，这类效果依赖于第三方组件，导致代码变得复杂。本文将介绍一个完全基于js脚本的解决方案，以及在实现过程中遇到并解决的问题。 **问题一：图片链接导致的页面跳转** 在为图片添加链接后，用户在尝试拖动图片时，可能会意外触发链接，导致页面跳转。关键在于区分触摸事件是点击还是拖动。手机事件序列通常包括`touchstart`、`mousedown`、`mousemove`、`touchmove`、`mouseup`、`touchend`和`click`。解决方法是记录`touchstart`的坐标与`touchmove`的坐标，比较两者间的差异。若触点移动超过一定阈值，则视为拖动，阻止`click`事件的默认行为。要注意`event.touches`、`event.targetTouches`和`event.changedTouches`这三个事件参数的区别，以及在某些情况下`touchend`可能无法获取触点坐标。为了避免意外的默认行为，如长时间按压出现菜单，可以在`touchstart`时使用`event.preventDefault()`。 **问题二：滚动条滚动冲突** 在拖动图片时，页面滚动条停止工作。这是因为`touchmove`或`mousemove`事件中取消了默认事件，导致无法滚动。为解决这个问题，我们需要检测当前触点与起始触点是否一致。如果一致，就允许滚动；否则，计算X轴和Y轴的移动量，当向左/右滑动时取消默认事件，允许向上/下滑动时保持默认行为。 **问题三：PC端的兼容性问题** 为了让脚本同时适用于手机和平板，需要在事件绑定时根据设备类型动态调整。可以创建一个对象`this.eventName`来存储不同设备的事件名称，例如： ```javascript this.eventName = { touchstart: 'touchstart', touchmove: 'touchmove', touchend: 'touchend' }; if (!device) { this.eventName.touchstart = 'mousedown'; this.eventName.touchmove = 'mousemove'; this.eventName.touchend = 'mouseup'; } dom.addEventListener(this.eventName.touchstart, handleEvent, false); ``` 这段代码会根据设备是否支持触摸事件，适配相应的事件名称。除此之外，实际开发中可能还会遇到其他问题，如性能优化、动画平滑度等，都需要综合考虑。以下是示例代码的HTML和CSS部分，它们确保了元素的填充和边距为零，以及在不同设备上的适应性： ```html <!doctype html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta content="telephone=no" name="format-detection" /> <title></title> <style type="text/css"> html, body, * { margin: 0; padding: 0; border: 0; } #wapListImage1, #wapListImage { width: 100%; overflow: hidden; /* 防止图片溢出 */ } </style> </head> <body>  <div id="wapListImage">  </div> </body> </html> ``` 实现wap手机图片滑动切换特效，需要对JavaScript事件机制、设备适配和滚动冲突处理有深入理解。通过精心设计的事件监听、坐标计算和设备检测，可以创建一个既美观又兼容的图片滑动切换效果。

资源推荐

资源详情

资源评论