javascript拖拽应用实例（二）_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:52:37

javascript拖拽应用实例（二）_javascript技巧

javascript拖拽应用实例（二）_javascript技巧:经常在网站别人的网站的注册页中看到一个拖拽验证的效果，就是它的验证码刚开始不出来，而是有一个拖拽的条，你必须将这个拖拽条拖到底，验证码才出来，说了感觉跟没说一样，你还是不理解，好吧，我给个图你看看：这个是在万网的注册页中所截的图，大概的效

推荐度：

点击下载本文 文档为doc格式

导读javascript拖拽应用实例（二）_javascript技巧:经常在网站别人的网站的注册页中看到一个拖拽验证的效果，就是它的验证码刚开始不出来，而是有一个拖拽的条，你必须将这个拖拽条拖到底，验证码才出来，说了感觉跟没说一样，你还是不理解，好吧，我给个图你看看：这个是在万网的注册页中所截的图，大概的效

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

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

看看我们做的效果：

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：


 
 
 请按住滑块，拖动到最右边

JavaScript：

参数说明：

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

obj：表示拖拽对象

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

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

oTxt：表示文本变化对象

endFn：返回函数，非必填

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascript拖拽应用实例（二）_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：应用示例 javascript

热门焦点

javascript拖拽应用实例（二）_javascript技巧

javascript拖拽应用实例（二）_javascript技巧

javascript拖拽应用实例（二）_javascript技巧

最新推荐

猜你喜欢

热门推荐