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 相关文章推荐
prototype 1.5相关知识及他人笔记
Dec 16 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
Aug 16 Javascript
json2.js的初步学习与了解
Oct 06 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
webpack构建的详细流程探底
Jan 08 Javascript
基于JavaScript伪随机正态分布代码实例
Nov 07 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
JS setTimeout与setInterval的区别
Apr 20 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来检测proxy
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
laravel执行php artisan migrate报错的解决方法
2019/10/09 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
JavaScript中this详解
2015/09/01 Javascript
JavaScript字符串删除重复字符的方法
2015/12/25 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
在vue中使用jointjs的方法
2018/03/24 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
Python性能优化的20条建议
2014/10/25 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python3 实现口罩抽签的功能
2020/03/11 Python
python TCP包注入方式
2020/05/05 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
用OpenCV进行年龄和性别检测的实现示例
2021/01/29 Python
任命书格式
2014/06/05 职场文书
主题团日活动总结
2014/06/25 职场文书
销售目标责任书
2014/07/23 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android