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各种复制代码收集
Sep 20 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
Sep 04 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
JS实现九宫格拼图游戏
Jun 28 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教程 基本语法
2009/10/23 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
PHP dirname功能及原理实例解析
2020/10/28 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery Tools Dateinput使用介绍
2012/07/14 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
vue axios同步请求解决方案
2017/09/29 Javascript
详解如何构建一个Angular6的第三方npm包
2018/09/07 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
如何用Python合并lmdb文件
2018/07/02 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
python创建文本文件的简单方法
2020/08/30 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
C++是不是类型安全的
2014/02/18 面试题
上海微创软件面试题
2012/06/14 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
高中毕业自我评价
2014/02/08 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
啤酒节策划方案
2014/05/28 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书