js untuk melaksanakan kemahiran seret lapisan seret modul iGoogleDivDrag effect_javascript

Contoh dalam artikel ini menerangkan kaedah melaksanakan kesan seret lapisan seret modul iGoogleDivDrag dalam js. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: js实现iGoogle Div Drag 模块拖动 层拖动效果 *{margin:0px; padding:0px;} body{position:relative; width:780px; height:800px; border:1px solid red} .drag{width:200px; height:100px; border:1px solid #000;margin:20px; background:#fff} .drag h1{margin:0px; padding:0px; font-size:12px; height:18px; line-height:18px; background:#E0E7F3; text-indent:20px;cursor:move;} .center{ margin:200px; border:3px solid red} www.baidu.com www.163.com www.jb51.net 测试二 测试三 测试四 测试五 /* Pengarang : popper.w Versi : v2.0 */ var DragZindexNumber=0; seret fungsi(obj){ var ox,oy,ex,xy,tag=0,mask=0; jika(tag==0){ obj.onmousedown=function(e) { if(topeng ==1){return; } obj.style.zIndex=DragZindexNumber ; transp(obj,"mulakan") tag=1; var e = e||window.event; ex=getEventOffset(e).offsetX; ey=getEventOffset(e).offsetY; ox=parseInt(obj.offsetLeft); oy=parseInt(obj.offsetTop); tempDiv=document.createElement("div"); dengan(tempDiv.style) { width=obj.offsetWidth "px"; height=obj.offsetHeight "px"; border="1px bertitik merah"; position="absolute"; left=obj.offsetLeft "px"; top=obj.offsetTop "px"; zIndex=999; } document.body.appendChild(tempDiv); this.ele=tempDiv; fDragStart(tempDiv); document.body.onmousemove=function(e){ jika(tag==1) { var e=e||window.event; tempDiv.style.left=parseInt(e.clientX)-ex "px"; tempDiv.style.top=parseInt(e.clientY)-ey "px"; } else{if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)} } tempDiv.onmouseup=function(e) { var e=e||window.event; fDragEnd(tempDiv); obj.style.position="absolute"; movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20); tempDiv.parentNode.removeChild(tempDiv); tag=0; } } } } filem fungsi(o,l,t){ var a=1; topeng=1; var ol=parseInt(o.offsetLeft); var ot=parseInt(o.offsetTop); var iTimer=setInterval(function(){ jika(a==10) { transp(o,"end"); topeng=0; clearInterval(iTimer); } o.style.left=ol a*(l-ol)/10 "px"; o.style.top=ot a*(t-ot)/10 "px"; a ; },20); } fungsi fCancleBubble(e) { var e = window.event || e; jika (e.preventDefault) e.preventDefault(); else e.returnValue = palsu; } fungsi transp(o,mod){ if(mode=="start"){ jika(dokumen.semua){ o.style.filter = "Alpha(Opacity=50)"; }lain{ o.style.opacity = 0.5; } } lain { jika(dokumen.semua){ o.style.filter = "Alpha(Opacity=100)"; }lain{ o.style.opacity = 1; } } } fungsi getOffset(evt) { var target = evt.target; if (target.offsetLeft == undefined) { sasaran = target.parentNode; } var pageCoord = getPageCoord(sasaran); var eventCoord = { x: window.pageXOffset evt.clientX, y: window.pageYOffset evt.clientY }; var offset = { offsetX: eventCoord.x - pageCoord.x, offsetY: eventCoord.y - pageCoord.y }; mengimbangi kembali; } fungsi getPageCoord(elemen) { var coordinat = {x: 0, y: 0}; manakala (elemen) { coord.x = element.offsetLeft; coord.y = element.offsetTop; elemen = elemen.offsetParent; } return coordinat; } fungsi getEventOffset(evt) { var msg = ""; jika (evt.offsetX == tidak ditentukan) { var evtOffsets = getOffset(evt); msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY}; } lain { msg={offsetX:evt.offsetX,offsetY:evt.offsetY}; } kembalikan mesej; } fungsi fDragStart(XEle) { suis(fCkBrs()) { kes 3: window.getSelection().removeAllRanges(); rehat; lalai: XEle.setCapture(); Rehat; } } fungsi fDragEnd(XEle) { suis(fCkBrs()) { kes 3: window.getSelection().removeAllRanges(); Rehat; lalai: XEle.releaseCapture(); Rehat; } } fungsi fCkBrs() { suis (navigator.appName) { kes 'Opera': kembali 2; kes 'Netscape': kembali 3; lalai: pulangkan 1; } } var element=document.getElementsByTagName("div"); untuk(var i=0;i if(elemen[i].className=="drag"){ seret(elemen[i])}

} Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.