javascript实现滑动解锁功能


Posted in Javascript onMarch 22, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript OFFICE控件测试代码
Dec 08 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
js获取视频时长代码
Apr 10 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 Javascript
vue-cli创建的项目,配置多页面的实现方法
Mar 15 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Bootstrap警告(Alerts)的实现方法
Mar 22 #Javascript
bootstrap IE8 兼容性处理
Mar 22 #Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 #Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 #jQuery
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 #Javascript
在 Angular 中实现搜索关键字高亮示例
Mar 21 #Javascript
js省市区级联查询(插件版&amp;无插件版)
Mar 21 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
15种PHP Encoder的比较
2007/04/17 PHP
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
javascript日期比较方法实例分析
2016/06/17 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
2017/03/24 jQuery
Node.js中的不安全跳转如何防御详解
2018/10/21 Javascript
JS实现打字游戏
2019/12/17 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python如何爬取51cto数据并存入MySQL
2020/08/25 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
Java模拟试题
2014/11/10 面试题
全国优秀教师事迹材料
2014/08/26 职场文书
先进典型发言材料
2014/12/30 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
教师节班会开场白
2015/06/01 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Python实现排序方法常见的四种
2021/07/15 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android