javascript拖拽应用实例(二)


Posted in Javascript onMarch 25, 2016

经常在网站别人的网站的注册页中看到一个拖拽验证的效果,就是它的验证码刚开始不出来,而是有一个拖拽的条,你必须将这个拖拽条拖到底,验证码才出来,说了感觉跟没说一样,你还是不理解,好吧,我给个图你看看:

javascript拖拽应用实例(二)

这个是在万网的注册页中所截的图,大概的效果就是,当拖动那个拖拽框时,如果拖拽框没有拖到最右边,则拖拽框会移动到初始位置,如果拖动到最右边,则拖拽框显示为对勾,中间的文字也变了,但是我试了一下,他的验证码的框没有出来,不知道是改了还是怎么的,我没有继续点击确定往下进行,那不是我们要讲的重点,我就在他的代码中把那个验证的框手动显示出来了,也就是gif最后的几帧中的画面,这样讲,应该懂我要讲的是什么意思吧,没错,我们今天要实现的就是这个拖拽验证的效果,拖拽后的验证框我们就不做了

看看我们做的效果:

javascript拖拽应用实例(二)

gif图感觉有点卡,实际效果要流畅一些,看看效果基本上无差吧,具体实现原理我就不讲了,如果还不知道怎么实现的同学,可以出门往左转,找到我写的一篇 :javascript实现PC网页里的拖拽效果 ,里面写的比较清楚,掌握拖拽的基本原理,实现这样的效果

那就是小菜一碟了,哈哈,那我就把代码贴出来给大家看看,仅供参考:

css:

#drag_wrap{
  width:300px;
  height:35px;
  position:relative;
  background:#e8e8e8;
  margin:100px auto;
}
#drag_bg{
  width:0;
  height:35px;
  background:#7ac23c;
  position:absolute;
  top:0;
  left:0;
}
#drag_box{
  width:40px;
  height:33px;
  border:1px solid #ccc;
  background:#fff url(images/rt.png) no-repeat center center;
  position:absolute;
  top:0;
  left:0;
  cursor:move;
  z-index:2;
}
#drag_txt{
  width: 100%;
  height: 100%;
  text-align: center;
  position: absolute;
  z-index: 1;
  background: transparent;
  color: #9c9c9c;
  line-height: 35px;
  font-size: 12px;
}
#drag_txt span{
  cursor: default;
  z-index: 0;
}
#drag_txt .startTxt{
  background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: slidetounlock 3s infinite;
  -webkit-text-size-adjust: none;
}
@-webkit-keyframes slidetounlock {
  0% {
    background-position: -200px 0
  }

  100% {
    background-position: 200px 0
  }
}
.yseTxt{
  background:none;
  color:#fff;
}

html:

<div id="drag_wrap">
    <div id="drag_bg"></div>
    <div id="drag_box"></div>
    <div id="drag_txt" ><span class="startTxt">请按住滑块,拖动到最右边</span></div>
  </div>

JavaScript:

window.onload = function(){

    drag("drag_box","drag_wrap","drag_bg","drag_txt");
    
    function drag(obj,parentNode,bgObj,oTxt,endFn){
      var obj = document.getElementById(obj);
      var parentNode = document.getElementById(parentNode);
      var bgObj = document.getElementById(bgObj);
      var oTxt = document.getElementById(oTxt);
      var aSpan = oTxt.getElementsByTagName("span")[0];
      obj.onmousedown = function(ev){
        var ev = ev || event;
        
        //非标准设置全局捕获(IE)
        if(obj.setCapture){
          obj.setCapture()  
        };

        var disX = ev.clientX - this.offsetLeft,
          disY = ev.clientY - this.offsetTop;
        var oWidth = obj.offsetWidth,
          oHeight = obj.offsetHeight;
        var pWidth = parentNode.offsetWidth,
          pHeight = parentNode.offsetHeight;      
        document.onmousemove = function(ev){
          var ev = ev || event;
          
          var left = ev.clientX - disX;
          //左侧
          if(left <= 0){
            left = 0;
          }else if(left >= pWidth - oWidth){//右侧
            left = pWidth - oWidth;
            obj.style.background = "#fff url(images/yes.png) no-repeat center center";
            aSpan.innerHTML = "验证通过"; //这里应该有ajax操作
            aSpan.className = 'yseTxt';
          };
          obj.style.left = bgObj.style.width = left + 'px';
    
          
        };
        document.onmouseup = function(ev){
          var ev = ev || event;
          document.onmousemove = document.onmouseup = null;
          //磁性吸附
          var L = ev.clientX - disX;
          if(L < pWidth - oWidth){
            startMove(obj,{left:0});
            startMove(bgObj,{width:0});  
          };
          endFn && endFn();
          //非标准释放全局捕获(IE)
          if(obj.releaseCapture){
            obj.releaseCapture()  
          };

        };
        return false;
      };  
    }  
    //这里是一个运动函数
    function startMove(obj,json,endFn){
      clearInterval(obj.timer);
      obj.timer = setInterval(function(){
        var bBtn = true;
        for(var attr in json){
          var iCur = 0;
          if(attr == 'opacity'){
            if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
              iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
              iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
            }  
          }
          else{
            iCur = parseInt(getStyle(obj,attr)) || 0;
          }
          var iSpeed = (json[attr] - iCur)/5;
          iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
          if(iCur!=json[attr]){
            bBtn = false;
          }
          if(attr == 'opacity'){
            obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
            obj.style.opacity = (iCur + iSpeed)/100;  
          }
          else{
            obj.style[attr] = iCur + iSpeed + 'px';
          }
        }
        if(bBtn){
          clearInterval(obj.timer);
          if(endFn){
            endFn.call(obj);
          }
        }
      },30);
    }
    //这里是获取css样式函数
    function getStyle(obj,attr){
      if(obj.currentStyle){
        return obj.currentStyle[attr];  
      }else{
        return getComputedStyle(obj,false)[attr];
      }
    }

  }

参数说明:

这里给了5个参数,obj,parentNode,bgObj,oTxt,endFn

obj:表示拖拽对象

parentNode:表示拖拽对象活动区域,一般设为父级

bgObj:表示拖拽时的背景颜色变化的对象

oTxt:表示文本变化对象

endFn:返回函数,非必填

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
jquery 插件学习(二)
Aug 06 Javascript
angularjs自定义ng-model标签的属性
Jan 21 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
html中通过JS获取JSON数据并加载的方法
Nov 30 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
JavaScript学习笔记之创建对象
Mar 25 #Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
JavaScript学习笔记之ES6数组方法
Mar 25 #Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 #Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 #Javascript
You might like
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
用unescape反编码得出汉字示例
2014/04/24 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
2014/11/28 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
vant 时间选择器--开始时间和结束时间实例
2020/11/04 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
Python迭代器定义与简单用法分析
2018/04/30 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Django工程的分层结构详解
2019/07/18 Python
Python 装饰器原理、定义与用法详解
2019/12/07 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
写出二分查找算法的两种实现
2013/05/13 面试题
高中毕业生个人自我鉴定
2013/11/24 职场文书
大学毕业感言
2014/01/10 职场文书
公司营业员的自我评价
2014/03/04 职场文书
课程改革实施方案
2014/03/16 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
详解MySQL的半同步
2021/04/22 MySQL
详解Redis实现限流的三种方式
2021/04/27 Redis