javascript —IPhone滑動解鎖javascript–拖動圖片時取消瀏覽器預設提示

<script type="text/javascript">    var untilEvent = {        addEvent:function(oElement,oType,fun){            oElement.attachEvent?oElement.attachEvent("on"+oType,fun):oElement.addEventListener(oType,fun,false);        },        removeEvent:function(oElement,oType,fun){            oElement.detachEvent?oElement.detachEvent("on"+oType,fun):oElement.removeEventListener(oType,fun,false);        }    }    window.onload = function(){        var oPar = document.getElementById("iphone");        var oDiv = document.getElementById("lock");            var oSpan = oDiv.getElementsByTagName("span")[0];        var spanW = oSpan.offsetWidth;        var divW =  oDiv.offsetWidth;        var downX = 0;        var moveX = 0;        var movekg = true;                var mDown = function(event){            var ev = event || window.event;            downX = ev.clientX;            untilEvent.addEvent(oSpan,"mousemove",mMove);            untilEvent.addEvent(document,"mouseup",mUp);            if(event.preventDefault){                event.preventDefault();                event.stopPropagation();            }                }                var mMove = function(event){            ev = event || window.event;            if(ev.cancelBubble){                ev.cancelBubble=true;                ev.returnValue = false;            }            moveX = ev.clientX;            var moveLenght = moveX - downX;            if(moveLenght>0){moveLenght = Math.min(moveLenght,divW-spanW)}else{                moveLenght = 0;            }            oSpan.style.left = moveLenght+"px";        }                var mUp  = function(){            untilEvent.removeEvent(oSpan,"mousemove",mMove);            untilEvent.removeEvent(document,"mouseup",mUp);            if(oSpan.offsetLeft>=(divW-spanW)){                oPar.style.background = "url('http://fgm.cc/iphone/2.jpg')";                oSpan.style.background = "none";            }            var dirct = oSpan.offsetLeft>(divW/2-spanW+20)?true:false;            var setInt = setInterval(function(){                if(dirct){                    oSpan.style.left = Math.min(divW-spanW,(oSpan.offsetLeft + 15))+"px";                    if(oSpan.offsetLeft >= (divW-spanW)){                        oPar.style.background = "url('http://fgm.cc/iphone/2.jpg')";                        oSpan.style.background = "none";                        clearInterval(setInt);                    }                }else{                    oSpan.style.left = Math.max(0,(oSpan.offsetLeft - 15))+"px";                    oSpan.offsetLeft <= 0 && clearInterval(setInt);                }            },30)                    }        untilEvent.addEvent(oSpan,"mousedown",mDown);    }</script>

 

一、實現功能

1.在滑塊移動到中間時向左自動，滑到起始點

2.當滑塊超過中間時，向右自動，滑到終點，並解鎖

3.滑鼠拖動滑塊到終點解鎖

 

二、注意點

1.去掉滑鼠拖動時的預設事件

可以參看我部落格裡面隨筆

javascript--拖動圖片時取消瀏覽器預設提示

  2.控制滑塊的地區，可以用Math.MAx或Marh.Min 3.在使用Setinterval時，注意區別兩種不同情況 原效果地址：http://js.fgm.cc/learn/iphone-unlock/ 我的DEMO下載 2.控制滑塊的地區，可以用Math.MAx或Marh.Min