脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现滑动解锁功能

javascript实现滑动解锁功能

 更新时间：2017年03月22日 08:49:17   作者：DarkNight  
本篇文章主要介绍了javascript实现滑动解锁功能的方法实例，具有很好的参考价值。下面跟着小编一起来看下吧

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <style type="text/css">
 * {
 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; 
 }
 </style>
</head>
<body>
 <div id="slider-box">
 <span id="slider">＞</span>
 <span id="slider-text">滑动解锁</span>
 <span id="slider-bg"></span>
 <span id="slider-Emerge"></span>
 <span id="stop-go">∨</span>
 </div>
</body>
 <script type="text/javascript">
 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<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  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<maxMove){
  speed=Math.ceil(Elemt.sd.offsetLeft/40);
  time=setInterval(function(){
  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);
  }
 }
 </script>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS实现关闭小广告特效

    JS实现关闭小广告特效

    这篇文章主要为大家详细介绍了JS实现关闭小广告特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • window.print()打印根据高度设置居中显示和布局(纵向横向)

    window.print()打印根据高度设置居中显示和布局(纵向横向)

    本文主要介绍了window.print()打印根据高度设置居中显示和布局(纵向横向)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 基于前端实现版本更新自动检测的流程步骤

    基于前端实现版本更新自动检测的流程步骤

    在现代Web应用中,为了提升用户体验并确保系统的稳定性和一致性,部署前端版本更新后及时提醒用户进行页面刷新是至关重要的,所以本文给大家介绍了基于前端实现版本更新自动检测的流程步骤,需要的朋友可以参考下
    2025-03-03
  • JavaScript适配器模式原理与用法实例详解

    JavaScript适配器模式原理与用法实例详解

    这篇文章主要介绍了JavaScript适配器模式原理与用法,结合具体实例形式详细分析了JavaScript适配器模式概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Window.Open打开窗体和if嵌套代码

    Window.Open打开窗体和if嵌套代码

    这篇文章主要介绍了Window.Open打开窗体和if嵌套代码的相关资料,需要的朋友可以参考下
    2016-04-04
  • 自定义事件解决重复请求BUG的问题

    自定义事件解决重复请求BUG的问题

    下面小编就为大家带来一篇自定义事件解决重复请求BUG的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • BootStrapValidator初使用教程详解

    BootStrapValidator初使用教程详解

    bootstrap能够增加兼容性的强大框架,在项目中用到了数据验证功能，今天小编就抽空给大家介绍下BootStrapValidator初使用教程详解，一起看看吧
    2017-02-02
  • javascript浏览器窗口之间传递数据的方法

    javascript浏览器窗口之间传递数据的方法

    这篇文章主要介绍了javascript浏览器窗口之间传递数据的方法,实例分析了父窗口与子窗口之间传递参数的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-01-01
  • javascript 类方法定义还是有点区别

    javascript 类方法定义还是有点区别

    这两个定义都可以，不过后者对FF貌似好一些，前者在FF下可能出现missing before formal parameters错误，导致js无法执行。
    2009-04-04
  • 非常漂亮的JS+CSS图片幻灯切换特效

    非常漂亮的JS+CSS图片幻灯切换特效

    放在你的首页比较不错，宽屏图片格式，每张图片平滑飞入切换，鼠标放上自动切换，和FLASH的平滑效果差不多，喜欢的朋友可以收藏下
    2013-11-11

最新评论