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

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

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

3、拖拽效果,里面写的比较清楚，掌握拖拽的 基本原理，实现这样的效果那就是小菜一碟了，哈哈，那我就把代码贴出来给大家看看，仅供参考：#drag_wrapwidth:300px;height:35px;posi tion:relative;background:#c8c8c8;margin:loopx auto;ttdragbgwidth:o;height:35px;background:#7ac23c;position:absolute;top:0;left:0;#drag_box width:40px;height:33px;border:lpx sol id #ccc;background:#

4、fff url (images/rt.png) no-repeat ccnter ccnter; position:absolute;top:0;left:0;cursor:move;z-index:2;#drag_txtwidth: 100%;height: 100%;tcxt-align: ccnter;position: absolute;z-index: 1;background: transparent;color: #9c9c9c;line-height: 35px;font-size: 12px;#drag_txt span cursor: default;z-index: 0;

5、#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-fi11-color: transparent;-webkit-emimation: slidctounloc

6、k 3s infinitc;-webkit-text-size-adjust: none;-webkit-keyframes slidetounlock 0% background-position: -200px 0100% background-positi on: 200px 0 ysetxt background:none;color:#fff;html：<div id=z/drag_wrap，z><div id=/，drag_bgz，></div><div id=，drag_box/，x/div><div id=/zdrag_tx

7、t/z xspan class二starttxt"请按住滑块，拖动到最右 边/span></div></div>javascript： window, onload 二 function()drag (z，drag_boxz，,，/drag_wrap/，, drag_bg，drag_txt)；function drag(obj,parentnode, bgobj, otxt, endfn)var obj 二 document. getelementbyld(obj);var parentnode = document. getelementbytd(pa

8、renlzode); var bgobj 二 document. getelementbyld(bgobj);var otxt = documcnt. getelcmcntbyld(otxt);var aspan = otxtgetelementsbytagname(span)0; obj. onmousedown = function(ev)var ev 二 ev | event;/非标准设置全局捕获(ie)if(obj. setcapture) obj. setcapture ();var disx 二 ev.clientx - this. offsetleft, disy 二 ev. c

9、licnty - this. offsettop;var owidth = obj.offsetwidth, oheight = obj.offsetheight;var pwidth 二 parentnode. offsetwidth, pheight 二 parentnode. offsetheight;document. onmousemove 二 function(cv) var ev = ev | event;var left 二 ev. dientx - disx;左侧 ifclcft <= 0) left = 0; else if (left >= pwidth -

10、owidth) /右侧 left = pwidth - owidth;obj. style, background = #fff url (images/yes. png) no-repeeit ccnter ccnter"aspan. innerhtml ="验证通过/这里应该冇ajax操作 aspan. classname = ' ysetxt"obj. style, left 二 bgobj. style. width 二 left + ' px ；document. onmouseup 二 function(ev) var ev 二 ev

11、| event;document. onmousemove 二 documcnt. onmouscup 二 null;磁性吸附var l = ev. clientx - disx;if (l < pwidth - owidth)startmove(obj, left:。);startmovc(bgobj, width:0);endfn && endfn ();/非标准释放全局捕获(ie)if (obj. releasecapture) obj. releasecapture ()；rcturn false;；/这里是一个运动函数 function startmove(ob

12、j, json, endfn) clcarlntcrval(obj timer);obj .timer = setinterval (fun ctiono var bbtn = true;for (var attr in json) var icur 二 0;if (at tr = j opac ity')if (math, round (parsefloat(getstyle(obj, attr)*100)=0) icur = math, round (parsefloat (getstyle(obj, attr)*100);else icur 二 math, round(parse

13、float(getstyle(obj, attr)*100) | 100; else icur 二 parsetnt (getstyle(obj, attr) | 0;var ispeed = (jsonattr - icur)/5; ispeed = ispeed >0 ? math, ceil(ispeed) : math, floor(ispeed); if (icur!=jsonattr) bbtn 二 false;if (attr = ' opacity')obj. style, filter = ? alpha(opacity二'+(icur + ispeed)+ ')' obj. style, opacity 二(icur + ispeed)/100;clsc obj.styleattr = icur + ispeed + ' px'if (bbtn) clcarlntcrval(obj timer);if (endfn) endfn. call(obj);这里是获取css样式函数 function getstyle(obj, attr)if (obj. currcntstylc) return obj currents