javascript ---IPhone滑动解锁

<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时,注意区别两种不同情况
 
 

转载于:https://www.cnblogs.com/lufy/archive/2012/07/23/2605094.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值