成都创新互联网站制作重庆分公司

如何使用javascript实现滑动解锁功能

小编给大家分享一下如何使用javascript实现滑动解锁功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

目前创新互联公司已为上千的企业提供了网站建设、域名、雅安服务器托管成都网站托管、企业网站设计、洪江管理区网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。

效果图:

如何使用javascript实现滑动解锁功能

代码如下:




 
 
 * {
 margin: 0;
 padding: 0;
 }
 #slider-box {
 width: 300px;
 height: 50px;
 border-radius: 4px;
 background: #ccc;
 margin: 250px auto;
 position: relative;
 }
 #slider {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 text-align: center;
 line-height: 48px;
 display: inline-block;
 background: #fff;
 border-radius: 4px;
 cursor: move;
 position: absolute;
 left: 0;
 z-index: 5;
 }
 #slider-text {
 text-align: center;
 line-height: 50px;
 display: inline-block;
 width: 100%;
 height: 50px;
 font-family: "微软雅黑";
 position: absolute;
 left: 0;
 z-index: 4;
 }
 #slider-bg {
 width: 0;
 height: 48px;
 background: green;
 position: absolute;
 z-index: 3;
 border-radius: 4px;
 }
 #slider-Emerge {
 width: 100px;
 background:;
 height: 50px;
 position: absolute;
 }
 #stop-go {
 width: 48px;
 height: 48px;
 border: 1px solid #eee;
 background:#36F;
 position: absolute;
 right: -1px;
 display: none;
 text-align: center;
 line-height: 48px;
 color: #fff;
 font-family: "微软雅黑";
 border-radius: 4px;
 z-index: 5;
 }
 div{
 -moz-user-select:none;
 -webkit-user-select:none;
 user-select:none; 
 }
 


 
 >
 滑动解锁
 
 
 ∨
 
   var sliderel={   $: function(selector){   return document.getElementById(selector)   },  getEvent:function(e){   var e=e || window.event   return e;  },  stopBubble:function(e){   var e =this.getEvent(e)   if(typeof e.preventDefault != "undefined"){   e.preventDefault();   }else{   e.returnValue = false;   }  }  },  Elemt={  flag:false,  nowMoseX: 0,  mx:sliderel.$("slider-box"),  sd:sliderel.$("slider"),  st:sliderel.$("slider-text"),  sb:sliderel.$("slider-bg"),  se:sliderel.$("slider-Emerge"),  sg:sliderel.$("stop-go"),  }  Elemt.sd.onmousedown=function(e){    var e =sliderel.getEvent(e)   sliderel.stopBubble(e);   Elemt.flag=true   nowMoseX=e.clientX-Elemt.sd.offsetLeft;  }  //滑块最大移动的距离  maxMove=Elemt.mx.offsetWidth -Elemt.sd.offsetWidth;  //鼠标移动的时候是否成功  Elemt.mx.onmousemove=function(e){   var e =sliderel.getEvent(e)   if(Elemt.flag){   var moveX=e.clientX-nowMoseX;   var oElemLeft=Elemt.sd.offsetLeft;//判断滑块移动的范围     if(oElemLeft<0){ //判断滑块是否超出限制位置   moveX=0;   Elemt.flag=false   }else if(oElemLeft>maxMove){   moveX=maxMove;   Elemt.sg.style.display="block";   Elemt.sd.style.display="none"   Elemt.sb.style.width=300+"px"   Elemt.st.innerHTML="滑动成功"   Elemt.st.style.color="#fff"   }   }   Elemt.sd.style.left=moveX+"px"    Elemt.sb.style.width=oElemLeft+20+"px";  }  //当鼠抬起判断是否滑动成功  Elemt.mx.onmouseup=function(e){   var e =sliderel.getEvent(e)   Elemt.flag=false   if(Elemt.sd.offsetLeft=0){    Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";    Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";   }else{    clearInterval(time);    return false;   }   },10)   }   }  //当鼠离开是否滑动成功   Elemt.sd.onmouseout=function(e){   sliderel.stopBubble(e);   Elemt.flag=false;   if( Elemt.sd.offsetLeft=0){    Elemt.sd.style.left=Elemt.sd.offsetLeft-speed+"px";    Elemt.sb.style.width=Elemt.sb.offsetWidth-speed+"px";   }else{    clearInterval(time);    return false;   }   },10);   }  }  

看完了这篇文章,相信你对“如何使用javascript实现滑动解锁功能”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


分享名称:如何使用javascript实现滑动解锁功能
链接分享:http://cxhlcq.com/article/gdjocj.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部