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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
js 操作select相关方法函数
Dec 06 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
js轮播图的插件化封装详解
Jul 17 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
如何在Vue中使用CleaveJS格式化你的输入内容
Dec 14 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
vue实现图片上传预览功能
Dec 23 Javascript
详解JavaScript的计时器和按钮效果设置
Feb 18 Javascript
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
几种显示数据的方法的比较
2006/10/09 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP 无限级分类
2017/05/04 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
2011/01/31 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JS随机漂浮广告代码具体实例
2013/11/19 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
优秀党员转正的自我评价
2013/10/06 职场文书
丑小鸭教学反思
2014/02/03 职场文书
学习雷锋寄语大全
2014/04/11 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
怎样写离婚协议书
2014/09/10 职场文书
受伤赔偿协议书
2014/09/24 职场文书
股东出资证明书范例
2014/10/04 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
小学教师见习总结
2015/06/23 职场文书
小型婚礼主持词
2015/06/30 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android