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

《javascript拖拽应用实例（二）_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、javascript拖拽应用实例（二）经常在网站别人的网站的注册页中看到一个拖拽验证的效果，就是它的验证码刚开始不岀来，而是有一个拖拽的条，你必须将这个拖拽条拖到底，验证码才出来,说了感觉跟没说一样，你还是不理解，好吧，我给个图你看看：*验证»I交酬块'拖动到最右边回创建网站账号的同时，我同意:《阿里云网站服务条款》「并且我同意阿里云按照网站服祭息r并SS时有权撒回该等同意。夢阿里云可通过电话（包括语青通话、短信、或传真）有针眾:/E艮务笛信息。确认这个是在力•网的注册页中所截的图，大概的效果就是，当拖动那个拖拽框时，如果拖拽框没有拖到最右边，则拖拽框会移动到

2、初始位置，如果拖动到最右边，则拖拽框显示为对勾，中间的文字也变了，但是我试了一下，他的验证码的框没冇出來，不知道是改了还是怎么的，我没有继续点击确定往下进行，那不是我们耍讲的重点，我就在他的代码屮把那个验证的框手动显示出来了，也就是gif最后的儿帧中的画面，这样讲，应该懂我要讲的是什么意思吧，没错，我们今天要实现的就是这个拖拽验证的效果，拖拽后的验证框我们就不做了看看我们做的效果：ii［住滑块，拖动到最右边gif图感觉冇点卡，实际效呆要流畅一些，看看效果基本上无差吧，具体实现原理我就不讲了，如果还不知道怎么实现的同学，可以出门往左转，找到我写的一篇：javas

3、cript实现PC网页里的拖拽效果,里面写的比较清楚，掌握拖拽的基本原理，实现这样的效果那就是小菜一碟了，哈哈，那我就把代码贴出来给大家看看，仅供参考：#drag_wrap{width:300px;height:35px;position:relative;background:#c8c8c8;margin:lOOpxauto;}ttdragbg{width:O;height:35px;background:#7ac23c;position:absolute;top:0;left:0;}#drag_box{width:40px;height:33px;bord

4、er:lpxsolid#ccc;background:#fffurl(images/rt.png)no-repeatccnterccnter;position:absolute;top:0;left:0;cursor:move;z-index:2;}#drag_txt{width:100%;height:100%;tcxt-align:ccnter;position:absolute;z-index:1;background:transparent;color:#9c9c9c;line-height:35px;font-size:12px;}#drag_txt

5、span{cursor:default;z-index:0;#drag_txt.startTxt{background:-webkit-gradient(linear,lefttop,righttop,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-fi11-color:transparent;-webki

6、t-emimation:slidctounlock3sinfinitc;-webkit-text-size-adjust:none;}@-webkit-keyframesslidetounlock{0%{background-position:-200px0}100%{background-position:200px0}}・yseTxt{background:none;color:#fff;html：