彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > wap图片滚动特效无css3元素纯js脚本编写

wap图片滚动特效无css3元素纯js脚本编写

发布时间:2019-09-01 18:21编辑:学会党委浏览(58)

    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,
    #wapListImage ul li a img,
    #wapListImage ul li a img:active,
    #wapListImage ul li a,#wapListImage ul li a:active{cursor: move;}
    #wapListImage dl{ position: absolute; bottom: 10px; right: 0;}
    #wapListImage dl span{overflow: hidden;width: 10px; height: 10px; background-color: #900; display: inline-block;}
    #wapListImage dl span.selected{ background-color: #000;}
    </style>
    </head>
    <body>
    <div id="k">
    <div id="wapListImage">
    <ul>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
    <!-- <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li> -->
    </ul>
    <dl>
    1
    2
    3
    <!-- 4
    5
    6 -->
    
    </dl>
    </div>
    </div>
    <div style="height:200px;"></div>
    <div id="wapListImage1">
    <ul>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd" target="_black"><img src="http://file25.mafengwo.net/M00/37/74/wKgB4lM9Hb-ARjpJAAOsX46Kq9w39.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/F2/06/wKgB4lNaHHCASXmDAAFtZsUxuwQ66.gonglve.w690.jpeg"></a></li>
    <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" hrefto="ddd"><img src="http://file25.mafengwo.net/M00/2B/EE/wKgB4lNwdpeAbvZiAAWcFRXe2Po83.gonglve.w690.jpeg"></a></li>
    </ul>
    </div>
    <script type="text/javascript">
    ;(function(w,d){
    var device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
    function WapImage(){
    this.options={
    dom: null,
    speed:200,
    isupdate:true,
    time:3000,
    leftOrright:'left',
    isfor:false,
    callBack:function(){}
    },
    this.eventName={
    touchstart:'touchstart',
    touchmove:'touchmove',
    touchend:'touchend',
    },
    this.point={
    x:5,
    y:5,
    pageX1:0,
    pageX2:0,
    pageY1:0,
    pageY2:0
    },
    this.page={
    bodyWidth:320,
    domUL:null,
    liList:null,
    index: 0,
    flag:false,
    sTime:0,
    eTime:0,
    isDown:false,
    mleft:0,
    back:30,
    moveId:[],
    nextId:null,
    prevId:null,
    isdom:false
    },
    this.Event={
    handleEvent: function(event,lib){
    event = event ? event : window.event;
    // console.log(event.type)
    switch(event.type){
    
    case "touchstart":
    var touch = event.touches[0];
    case "mousedown":
    if(lib.page.isDown) return;
    lib.page.isDown=true;
    lib.page.sTime=lib.page.eTime=new Date().getTime();
    lib.Event.stop(lib,lib);
    if(event.type=="mousedown"){
    touch = event;
    event.preventDefault();
    }
    lib.point.pageX1 = lib.point.pageX2 = touch.pageX;
    lib.point.pageY1 = lib.point.pageY2 = touch.pageY;
    lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
    lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;
    break;
    case "touchmove":
    var touch = event.touches[0];
    case "mousemove":
    if(!lib.page.isDown) return;
    
    if(event.type=="mousemove"){
    touch = event;
    }
    lib.point.pageX2 = touch.pageX;
    lib.point.pageY2 = touch.pageY;
    
    
    if(lib.point.pageX1==lib.point.pageX2){
    event.preventDefault(); 
    return false;
    }
    var changeX = lib.point.pageX1 - lib.point.pageX2;
    var changeY = lib.point.pageY1 - lib.point.pageY2;
    if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件
    event.preventDefault(); 
    lib.page.domUL.style.marginLeft=lib.page.mleft-changeX+'px';
    if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){
    lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
    lib.page.mleft=-(lib.page.liList.length-1)*lib.page.bodyWidth;
    }
    if(parseFloat(lib.page.domUL.style.marginLeft)>0){
    lib.page.domUL.style.marginLeft='0px';
    lib.page.mleft=0;
    }
    
    
    }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件
    
    }else{//长按或点击
    
    }
    break;
    case "mouseup":
    case "touchend":
    if(!lib.page.isDown) return;
    lib.page.eTime=new Date().getTime();
    lib.page.mleft = parseFloat(lib.page.domUL.style.marginLeft);
    lib.page.mleft = lib.page.mleft ? lib.page.mleft : 0;
    
    var changeX = lib.point.pageX1 - lib.point.pageX2;
    var changeY = lib.point.pageY1 - lib.point.pageY2;
    if(Math.abs(changeX)>Math.abs(changeY)) {//左右事件
    
    event.preventDefault();
    lib.Event.move.call(this,lib);
    
    }else if(Math.abs(changeY)>Math.abs(changeX)){//上下事件
    lib.Event.move.call(this,lib);
    }else{//长按或点击
    if((lib.page.eTime - lib.page.sTime) > 300) {//长按
    }else{//点击
    if(event.button==0 || event.type=='touchend'){
    var a = lib.page.liList[lib.page.index].getElementsByTagName('a')[0];
    if(typeof a.getAttribute('target')=='object'){
    w.location=a.getAttribute('hrefto')
    }else{
    w.open(a.getAttribute('hrefto'));
    }
    }
    
    }
    }
    lib.page.isDown=false;
    break;
    default:
    break;
    }
    },
    position: function(lib,index){
    // if(index==undefined){
    // lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
    // }else{
    // lib.page.domUL.style.marginLeft= -(index*lib.page.bodyWidth) +'px';
    // lib.page.index=index;
    // }
    
    
    
    if(!lib.options.isfor){
    if(index==undefined){
    lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
    }else{
    lib.page.domUL.style.marginLeft= -((index-1)*lib.page.bodyWidth) +'px';
    lib.page.index=index-1;
    }
    lib.options.callBack({"index":parseInt(lib.page.liList[lib.page.index].getAttribute('index'))+1});
    }else{
    if(index==undefined){
    lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
    }else{
    lib.page.domUL.style.marginLeft= -lib.page.bodyWidth +'px';
    while(true){
    if(parseInt(index)==parseInt(lib.page.liList[1].getAttribute('index'))+1){
    break;
    }
    lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
    }
    }
    lib.options.callBack({"index":parseInt(lib.page.liList[1].getAttribute('index'))+1});
    }
    },
    stop:function(lib){
    for(var i =0;i<lib.page.moveId.length;i++){
    clearInterval(lib.page.moveId[i]);
    }
    lib.page.moveId=[];
    },
    start:function(lib){
    if(lib.options.isupdate){
    lib.page.moveId[lib.page.moveId.length] = setInterval(function(){
    if(lib.options.leftOrright=='left'){
    lib.Event.next(lib,lib);
    }else{
    lib.Event.prev(lib,lib);
    }
    },lib.options.time);
    }
    },
    next:function(lib){
    // console.log(lib.page.prevId.length+"nextId")
    // for (var n=0;n<lib.page.prevId.length;n++) {
    // // clearInterval(lib.page.prevId[n]);
    // };
    // lib.page.prevId=[];
    clearInterval(lib.page.prevId);
    lib.page.prevId=null;
    // var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
    var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
    while(true){
    if(yu==0){
    yu=lib.page.bodyWidth;
    break;
    }else if(yu<0){
    yu= Math.abs(yu);
    break;
    }
    yu=yu-lib.page.bodyWidth
    }
    // var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
    var left = yu/lib.options.speed;
    var c = 0;
    if(lib.page.index==lib.page.liList.length-1){
    lib.page.flag=false;
    return;
    }
    clearInterval(lib.page.nextId);
    lib.page.nextId = window.setInterval(function(){
    // lib.Event.stop(lib,lib);
    // if(lib.page.moveId==null){
    // clearInterval(id);
    // }
    c=c+5;
    lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)-left*5)+'px';
    // console.log("next"+lib.page.domUL.style.marginLeft);
    if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth ){
    if(parseFloat(lib.page.domUL.style.marginLeft)<= -(lib.page.liList.length-1)*lib.page.bodyWidth){
    lib.page.domUL.style.marginLeft= -(lib.page.liList.length-1)*lib.page.bodyWidth+'px';
    }
    clearInterval(lib.page.nextId);
    // for(var n=0;n=lib.page.nextId.length;n++){
    // clearInterval(lib.page.nextId[0]);
    // }
    // lib.page.nextId=[];
    lib.page.index++;
    lib.page.flag=false;
    lib.Event.domUpdate.call(this,lib,'r');
    if(lib.page.moveId.length==0){
    lib.Event.start(lib,lib);
    }
    
    }
    },5);
    },
    prev:function(lib){
    // console.log(lib.page.nextId.length+"nextId")
    // for(var n=0;n=lib.page.nextId.length;n++){
    // // clearInterval(lib.page.nextId[0]);
    // }
    clearInterval(lib.page.nextId);
    lib.page.nextId=null;
    // lib.page.nextId=[];
    // var left = (lib.page.bodyWidth-Math.abs(lib.point.pageX1-lib.point.pageX2))/lib.options.speed;
    // var left = (lib.page.bodyWidth-Math.abs(parseFloat(lib.page.domUL.style.marginLeft)%lib.page.bodyWidth))/lib.options.speed;
    var yu = Math.abs(parseInt(lib.page.domUL.style.marginLeft));
    // console.log(yu+"----"+lib.page.domUL.style.marginLeft)
    while(true){
    if(yu==0){
    yu=lib.page.bodyWidth;
    break;
    }else if(yu<0){
    yu= lib.page.bodyWidth-Math.abs(yu);
    break;
    }
    yu=yu-lib.page.bodyWidth
    }
    // var left = (lib.page.bodyWidth-yu)/lib.options.speed;
    var left = yu/lib.options.speed;
    var c = 0,id;
    if(lib.page.index==0){
    lib.page.flag=false;
    return;
    } 
    var ml = parseFloat(lib.page.domUL.style.marginLeft);
    clearInterval(lib.page.prevId);
    lib.page.prevId = window.setInterval(function(){
    c=c+5;
    lib.page.domUL.style.marginLeft= (parseFloat(lib.page.domUL.style.marginLeft)+left*5)+'px';
    // console.log(lib.page.domUL.style.marginLeft);
    if(c>=lib.options.speed || parseFloat(lib.page.domUL.style.marginLeft)>=0){
    if(parseFloat(lib.page.domUL.style.marginLeft)>=0){
    lib.page.domUL.style.marginLeft='0px';
    }
    
    clearInterval(lib.page.prevId);
    // for (var n=0;n<lib.page.prevId.length;n++) {
    // clearInterval(lib.page.prevId[n]);
    // };
    // lib.page.prevId=[];
    
    lib.page.index--;
    lib.page.flag=false;
    lib.Event.domUpdate.call(this,lib,'l');
    if(lib.page.moveId.length==0){
    lib.Event.start(lib,lib);
    }
    }
    },5);
    },
    move:function(lib){
    if(lib.page.flag) return;
    lib.page.flag=true;
    if(Math.abs(lib.point.pageX1-lib.point.pageX2)<lib.page.back){
    var h = Math.abs(Math.abs(parseFloat(lib.page.domUL.style.marginLeft))-Math.abs(lib.page.bodyWidth*lib.page.index))
    h = h/70;
    
    var hi = 0;
    var hid;
    hid = window.setInterval(function(){
    
    if(lib.point.pageX2>lib.point.pageX1){
    lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) - h*5) +'px';
    }else{
    
    lib.page.domUL.style.marginLeft = (parseFloat(lib.page.domUL.style.marginLeft) + h*5) + 'px';
    }
    hi=hi+5;
    if(hi>=70){
    clearInterval(hid);
    lib.page.domUL.style.marginLeft= -(lib.page.index*lib.page.bodyWidth) +'px';
    lib.page.flag=false;
    }
    },5);
    return;
    }
    
    
    if(lib.point.pageX1-lib.point.pageX2>0){
    lib.Event.next.call(this,lib);
    }else if(lib.point.pageX2-lib.point.pageX1>0){
    // console.log("===")
    lib.Event.prev.call(this,lib);
    }
    },
    domUpdate: function(lib,type){
    if(lib.page.isdom) return;
    lib.page.isdom=true;
    
    if(!lib.options.isfor){
    var index = lib.page.liList[lib.page.index].getAttribute('index');
    lib.options.callBack({"index":parseInt(index)+1});
    lib.page.isdom=false;
    return;
    }
    if(type=='l'){
    lib.page.domUL.insertBefore(lib.page.liList[lib.page.liList.length-1],lib.page.liList[0]);
    lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)-lib.page.bodyWidth)+'px';
    //lib.page.index++;
    }else if(type=='r'){
    lib.page.domUL.appendChild(lib.page.liList[0]);
    lib.page.domUL.style.marginLeft=-lib.page.bodyWidth+'px';//(parseFloat(lib.page.domUL.style.marginLeft)+lib.page.bodyWidth)+'px';
    //lib.page.index--;
    }
    lib.page.index=1;
    // console.log(lib.page.index)
    var index = lib.page.liList[lib.page.index].getAttribute('index');
    lib.options.callBack({"index":parseInt(index)+1});
    lib.page.isdom=false;
    }
    };
    };
    WapImage.prototype = {
    setoption: function(arg){
    for(var i in this.options){
    this.options[i]= arg[i] !== undefined ? arg[i] : this.options[i];
    }
    if(!device){
    this.eventName.touchstart='mousedown';
    this.eventName.touchmove='mousemove';
    this.eventName.touchend='mouseup';
    }
    //return temp;
    },
    bindEvent: function(){
    var lib = this;
    this.page.domUL.addEventListener(this.eventName.touchstart,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
    w.addEventListener(this.eventName.touchmove,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
    w.addEventListener(this.eventName.touchend,function(event){lib.Event.handleEvent.call(lib,event,lib);},false);
    w.addEventListener('resize',function(){lib.init();},false);
    },
    init:function(){
    this.page.bodyWidth=document.body.clientWidth;
    this.page.liList= this.options.dom.getElementsByTagName('li');
    this.page.domUL = this.options.dom.getElementsByTagName('ul')[0];
    this.options.dom.style.width=this.page.bodyWidth+'px';
    
    for(var i=0;i<this.page.liList.length;i++){
    var item = this.page.liList[i];
    var img = item.getElementsByTagName('img')[0];
    item.setAttribute('index',i);
    item.style.width=this.page.bodyWidth+'px';
    img.style.width = this.page.bodyWidth+'px';
    }
    if(this.page.liList.length<3){
    var length = this.page.liList.length;
    if(length==1){
    this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
    this.page.domUL.appendChild(this.page.liList[0].cloneNode(true));
    }else{
    for(var i=0;i<length;i++){
    this.page.domUL.appendChild(this.page.liList[i].cloneNode(true));
    }
    }
    
    this.page.liList= this.options.dom.getElementsByTagName('li'); 
    }
    },
    position:function(index){
    this.Event.position.call(this,this,index);
    },
    next:function(){
    this.Event.next.call(this,this);
    },
    prev:function(){
    this.Event.prev.call(this,this);
    },
    start: function(arg){
    this.setoption(arg);
    this.init();
    this.position();
    this.bindEvent();
    this.Event.domUpdate(this,'l');
    this.Event.start(this);
    
    }
    };
    var loaded=function(){
    w.WapImage=new WapImage();
    w.WapImages=new WapImage();
    };
    (function(){
    if(d.body){
    loaded();
    }else{
    if(d.addEventListener){
    d.addEventListener( 'DOMContentLoaded', function(){
    d.removeEventListener( 'DOMContentLoaded', arguments.callee, false );
    loaded();
    }, false );
    }else if(d.attachEvent){
    d.attachEvent( 'onreadystatechange', function(){
    if( d.readyState === 'complete' ){
    d.detachEvent( 'onreadystatechange', arguments.callee );
    loaded();
    }
    });
    }
    }
    })();
    })(window,document,undefined);
    
    window.onload = function(){
    var obj = {
    dom:document.getElementById('wapListImage'),
    isupdate:true,
    time:3000,
    isfor:true,
    leftOrright:'left',
    callBack:function(obj){
    var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
    for(var k = 0;k
    </body>
    </html>
    

    用法:

    在页面加载完成后

    var obj = {
    dom:document.getElementById('wapListImage'),//dom元素
    isupdate:true,//是否自动切换
    time:3000,//自动切换的时间毫秒
    isfor:true, //是否循环播放,即到最后一张是否直接转入第一张,或到第一张直接转入最后一张
    leftOrright:'left',//像左侧自动切换还是像右侧自动切换
    callBack:function(obj){//切换成功后回调函数 其实有index参数为当前第几张图片
    
    //自己处理
    var span = document.getElementById('wapListImage').getElementsByTagName('dl')[0].getElementsByTagName('span');
    for(var k = 0;k
    

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行;还有就是用到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);
    

    本文由彩世界平台发布于学会党委,转载请注明出处:wap图片滚动特效无css3元素纯js脚本编写

    关键词: