Español
Código de efectos especiales de la página web: capa genial en la página web que el mouse puede arrastrar a cualquier lugar
<html> <head> <title>capa que el mouse puede arrastrar a cualquier lugar www.downcodes.com</title> <meta http-equiv= "Contenido -Tipo" contenido="text/html; charset=gb2312"> <estilo> *{font-size:12px} .dragTable{ font-size:12px; border-top:1px solid #3366cc; 10px; ancho: 100%; color de fondo: #FFFFFF; } td{vertical-align:top;} .dragTR{ cursor:move; color:#7787cc; :5px; peso de fuente:bold; } #parentTable{ border-collapse:collapse; espaciado de letras:25px } </style> <script defer> var Drag={dragged:false, ao:null, tdiv:null, arrastrarInicio: función(){ Arrastrar.ao=event.srcElement if((Arrastrar.ao.tagName=="TD")||(Arrastrar.ao.tagName=="TR")){ Arrastrar.ao=Arrastrar. ao.offsetParent; Drag.ao.style.zIndex=100; }else return; Drag.dragged=true; Drag.tdiv=document.createElement("div"); .ao .style.border="1px rojo discontinuo"; Drag.tdiv.style.display="bloque"; Drag.tdiv.style.position="absoluto"; 70) "; Arrastrar.tdiv.style.cursor="mover"; Arrastrar.tdiv.style.border="1px sólido #000000"; Arrastrar.tdiv.style.width=Arrastrar.ao.offsetWidth; Arrastrar.tdiv.style .height =Drag.ao.offsetHeight; Drag.tdiv.style.top=Drag.getInfo(Drag.ao).top; Drag.tdiv.style.left=Drag.getInfo(Drag.ao).left; .appendChild (Arrastrar.tdiv); Arrastrar.lastX=event.clientX; Arrastrar.lastY=event.clientY; Arrastrar.lastLeft=Arrastrar.tdiv.style.left; arrastrando: function(){//Importante: determine la posición del MOUSE if(!Drag.dragged||Drag.ao==null)return; var tX=event.clientX; var tY=event.clientY; style.left =parseInt(Drag.lastLeft)+tX-Drag.lastX; Drag.tdiv.style.top=parseInt(Drag.lastTop)+tY-Drag.lastY for(var i=0;i<parentTable.cells .length i++){ var parentCell=Drag.getInfo(parentCell.cells[i]); if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ var subTables=parentTable .cells[ i].getElementsByTagName("tabla"); if(subTables.length==0){ if(tX>=parentCell.left&&tX<=parentCell.right&&tY>=parentCell.top&&tY<=parentCell.bottom){ parentTable. celdas[i ].appendChild(Drag.ao); } break; } for(var j=0;j<subTables.length;j++){ var subTable=Drag.getInfo(subTables[j]); subTable.left&&tX <=subTable.right&&tY>=subTable.top&&tY<=subTable.bottom){ parentTable.cells[i].insertBefore(Drag.ao,subTables[j] }else{ parentTable.cells[i]); .appendChild( Drag.ao); } } } } } , dragEnd:function(){ if(!Drag.dragged)return; Drag.dragged=false; Drag.mm=Drag.repos(150,15); ao.style .borderWidth="0px"; Drag.ao.style.borderTop="1px sólido #3366cc"; Drag.tdiv.style.borderWidth="0px"; Drag.ao.style.zIndex=1; :function( o){//Obtener coordenadas var to=new Object(); to.left=to.right=to.top=to.bottom=0; while(o !=document.body){ to.left+=o.offsetLeft; to.top+=o.offsetTop; o=o.offsetParent } to.right=to.left+twidth; +la altura; volver a; }, repos:function(aa,ab){ var f=Drag.tdiv.filters.alpha.opacity var tl=parseInt(Drag.getInfo(Drag.tdiv).left; parseInt(Drag .getInfo(Drag.tdiv).top); var kl=(tl-Drag.getInfo(Drag.ao).left)/ab; )/ab ; var kf=f/ab; return setInterval(function(){if(ab<1){ clearInterval(Drag.mm); Drag.tdiv.removeNode(true); Drag.ao=null; return; } ab--; tl-=kl; tt-=kt; arrastrar.tdiv.style.left=parseInt(tl)+"px"; px"; Drag.tdiv.filters.alpha.opacity=f; } ,aa/ab) }, inint:function(){//Inicialización for(var i=0;i<parentTable.cells.length;i++){ var subTables= parentTable.cells[i].getElementsByTagName("table"); for(var j=0;j<subTables.length;j++){ if(subTables[j].className!="dragTable")break; [j] .rows[0].className="dragTR"; subTables[j].rows[0].attachEvent("onmousedown",Drag.dragStart); Drag.dragEnd } //fin del arrastre de objetos } Drag.inint(); función _show(str){ var w=window.open('',''); ; str= str.replace(/=(?!")(.*?)(?!")( |>)/g,"="$1"$2"); str=str.replace(/( <)( .*?)(>)/g,"<span style='color:red;'><$2></span><br />"); /g, "<br />n"); d.write(str); } </script> </head> <body> <table border="0" cellpadding="0" cellspace="10" ancho ="100 %" altura=500 id="parentTable"> <tr > <td ancho="25%" valgin="top"> <table border=0 class="dragTable" cellspaceing="0"> <tr> <td> <b>Webjx.Com</b></td> </tr> <tr> <td>Website Building Academy es un sitio web profesional de enseñanza web con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 111111111111111111111111</td> <tr> </table><table border=0 class="dragTable"cellspacing="0"> <tr> <td>Academia de creación de sitios web 2</td> </tr> <tr> < td >Website Building Academy es un sitio web de enseñanza web profesional con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 22222222222222222</td> <tr> </table> <table border=0 class="dragTable"cellspacing="0"> <tr> <td>Academia de creación de sitios web 3</td> </tr> <tr> < td >Website Building Academy es un sitio web de enseñanza web profesional con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 333333333333333333333333333333</td> <tr> </table> </td> <td width="25%"> <table border=0 class="dragTable" cellspaceing="0"> <tr> <td>Academia de creación de sitios web 4 </td> </tr> <tr> <td>Website Building Academy es un sitio web profesional de enseñanza web con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 44444444444444444444444444</td> <tr> </table></td> <td width="25%"> <table border=0 class="dragTable" cellspaceing="0"> <tr> <td>Academia de creación de sitios web 5 </td> </tr> <tr> <td>Website Building Academy es un sitio web profesional de enseñanza web con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 555555555555555555555555</td> <tr> </table> <table border=0 class="dragTable" cellpacing="0"> <tr> <td>Academia de creación de sitios web 6</td> </tr> <tr> < td >Website Building Academy es un sitio web de enseñanza web profesional con actualizaciones rápidas de contenido. ¡El artículo tutorial es muy práctico! ¡Es un sitio frecuentado por entusiastas de la web! 6666666666666666666666666666</td> <tr> </table> </td> </tr> </table> <input type="button" value="MOSTRAR" onClick="_show(document.documentElement.innerHTML)" /> </cuerpo> </html>
