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 相关文章推荐
用javascript将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
JavaScript 定义function的三种方式小结
Oct 16 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
js取消单选按钮选中示例代码
Nov 14 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
微信小程序实现简易table表格
Jun 19 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
JavaScript中跨域问题的深入理解
Mar 04 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性能分析之php-fpm慢执行日志slow log用法浅析
2016/10/17 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
防止网站内容被拷贝的一些方法与优缺点好处与坏处分析
2007/11/30 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python创建线程示例
2014/05/06 Python
python处理csv数据的方法
2015/03/11 Python
matplotlib.pyplot画图 图片的二进制流的获取方法
2018/05/24 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python 制作磁力搜索工具
2021/03/04 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
个人简历自我评价八例
2013/10/31 职场文书
网吧收银员岗位职责
2013/12/14 职场文书
残疾人小组计划书
2014/04/27 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
庆七一活动总结
2014/08/27 职场文书
团队会宣传标语
2014/10/09 职场文书
离婚协议书格式范本
2016/03/18 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL