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 相关文章推荐
jquery ajax执行后台方法
Mar 18 Javascript
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
基于JS实现的倒计时程序实例
Jul 24 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
vuex管理状态仓库使用详解
Jul 29 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/12/28 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
AngularJS动态生成div的ID源码解析
2016/08/29 Javascript
nodejs微信公众号支付开发
2016/09/19 NodeJs
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
详解Webpack4多页应用打包方案
2020/07/16 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
React实现轮播效果
2020/08/25 Javascript
Vue ​v-model相关知识总结
2021/01/28 Vue.js
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python数据结构之二叉树的建立实例
2014/04/29 Python
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
普天C++笔试题
2016/03/20 面试题
假日旅行社实习自我鉴定
2013/09/24 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
2015年档案管理工作总结
2015/04/08 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
pyqt5蒙版遮罩mask,setmask的使用
2021/06/11 Python