wap图片滚动特效无css3元素纯js脚本编写
需积分: 0 40 浏览量
2020-12-09
03:57:26
上传
评论
收藏 85KB PDF 举报
wap图片滚动特效无图片滚动特效无css3元素纯元素纯js脚本编写脚本编写
手机图片滑动切换，网上有很多这样的例子，但都借助于其他组件，让代码混乱的不行；还有就是用到css3里的 transform：
translate（x,y）;移动元素,不过发现在不支持css3的设备上马上完蛋了，所以下定决心自己做一个，谁知出现了很多的问题，
其中最重要的是给图片加链接，网页中的上下滚动条不能在拖动图片的时候滚动，并且不能兼容pc机器上的拖动；在这里就
简单介绍一下遇到的问题和解决的方法；
问题一：给图片加上链接后，在拖动的时候总是跳到其他页面问题一：给图片加上链接后，在拖动的时候总是跳到其他页面
问题根源主要是不能判断是点击还是拖动，手机事件一般顺序是
touchstart-》mousedown-》mousemove-》touchmove-》mouseup-》touchend-》click，根据不同手机可能会有不同。触屏
手机的事件一般都用 touchstart -》 touchmove -》 touchend -》 click，click事件是最后执行的，当我们有
touchstart，touchmove，touchend处理完后，如果不进行return或取消默认就会触发click事件，这样网页就跳走了，解决办法
是记录touchstart的坐标点和touchmove的坐标点，根据两个坐标点算出触点是否移动过，其中值得关注的是事件的Event参
数，触屏一般是 event.touches，event.targetTouches，event.changedTouches。我在测试当中发现者三个参数的值时一样
的，不过值得注意的是touchend事件不会得到触点坐标（也或许是设备问题），在移动的时候touchmove会不断出发，有时候
touchmove会不触发，其中就是浏览器自带一下功能把触点（或鼠标）脱离了选中的元素，比如上时间按住会出现菜单，（pc
上图片就会生成一个可以拖动的缩略图），这样就要在touchstart（mousedown）的时候先 event.preventDefault();取消默
认。
问题二：网页中的上下滚动条不能在拖动图片的时候滚动问题二：网页中的上下滚动条不能在拖动图片的时候滚动
相信这个问题只要制作过得都会遇到，其实主要是在移动（touchmove，mousemove）的时候取消了默认事件
event.preventDefault(),在这里我们需要做的是，是否移动获得触点和开始的触点是否一致，如果一致就直接返回，还要算出
是移动的x轴多一点还是y轴移动的多一点，这样我们就可以做左右滑动的时候取消默认，在上学的时候不取消；
问题三： 并且不能兼容pc机器上的拖动
这是因为在绑定事件的时候不能完全考虑事件名称是touchstart还是mousedown ，从网上搜了一下，感觉做的不做，就直接抄
过来了
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);
大概是这个意思，根据设备不同绑定不同的事件
其实还碰到了很多的问题，就不一一说明了
不多说了，直接把代码贴出来了，如果有什么不太好的地方，还请多多包含和提出意见
<!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; height: auto; cursor: move; zoom:1; position: relative;}
#wapListImage1 ul,
#wapListImage1 ul li,
#wapListImage1 ul,
#wapListImage ul li{ list-style: none;}
#wapListImage1 ul, #wapListImage ul{width: 99999px;}
#wapListImage1 ul li, #wapListImage ul li{ float: left;}
#wapListImage ul li a img:focus,
#wapListImage ul li a img:checked,
评论0