鼠标框选多选框_表单按钮特效

模板酷站

查看演示效果

织梦DedeCMS视频教程买空间租服务器选网硕互联！无忧站长工具,百度权重一键全查!

鼠标框选多选框,您可以先修改部分代码再运行.

<html> <head> <SCRIPT language=JavaScript> /*-------------------------------------------- 本程式为鼠标框选多选框辅助帮手,其中还有不足. 1. 不能将多选框单独放到body标签中. 2. 多选框使用名子为ck+自然数, 如ck1. 3. 就先这么多吧,可能还有........... 制作者:八神奄 QQ:13730452 --------------------------------------------*/ var x0; var y0; var selectenable=0; function initChkBox(obj){ var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { var offsetTop = 0; var offsetLeft = 0; var objP = coll.item(i); while (objP.tagName!="BODY"&&objP){ offsetTop += objP.offsetTop; offsetLeft += objP.offsetLeft; objP = objP.offsetParent; } coll.item(i).X=offsetLeft+10; coll.item(i).Y=offsetTop+10; //alert(coll.item(i).X+","+coll.item(i).Y+","+coll.item(i).offsetHeight); } } } function initselect() { if (window.event.srcElement.tagName=="BODY") { window.event.returnValue = true; return; } x0=document.body.scrollLeft+event.clientX; y0=document.body.scrollTop+event.clientY; selectarea.setCapture(); selectenable=1; } function startselect() { if (selectenable==1) { selectarea.style.visibility='visible'; if(document.body.scrollLeft+event.clientX-x0>0) { selectarea.style.left=x0; selectarea.style.width=document.body.scrollLeft+event.clientX-x0; } else{ selectarea.style.left=document.body.scrollLeft+event.clientX; selectarea.style.width=x0-(document.body.scrollLeft+event.clientX); } if (document.body.scrollTop+event.clientY-y0>0) { selectarea.style.top=y0; selectarea.style.height=document.body.scrollTop+event.clientY-y0; } else{ selectarea.style.top=document.body.scrollTop+event.clientY; selectarea.style.height=y0-(document.body.scrollTop+event.clientY); } } window.event.returnValue = true; } function endselect() { if (selectenable==0) return false; selectenable=0; selectarea.style.visibility='hidden'; selectarea.releaseCapture(); document.onmousemove=http://p1.mb5u.com/texiao/16/20100523005003120; var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { /* if (((coll.item(i).X>selectarea.offsetLeft)&&(coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth))&&((coll.item(i).Y>selectarea.offsetTop)&&(coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight))){ coll.item(i).checked=!coll.item(i).checked;} */ if (coll.item(i).X>selectarea.offsetLeft) if (coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth) if (coll.item(i).Y>selectarea.offsetTop) if (coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight) coll.item(i).checked=!coll.item(i).checked } } selectarea.style.pixelHeight=0; selectarea.style.pixelWidth=0; } /*function hideselect() { //if (document.body.scrollLeft+event.clientX==x0 && document.body.scrollTop+event.clientY==y0 && event.srcElement!=selectarea) selectarea.style.visibility='hidden'; }*/ function checkAll(){ document.form1.allsel.checked=false; var coll=document.forms["form1"].tags("input"); for (i=0;i<coll.length;i++){ if (coll.item(i).name.substr(0,2)=="ck") { coll.item(i).checked=false; } } } function change(v){ var f = document.forms["form1"]; for (i=0;i<f.elements.length;i++) if (f.elements[i].name.substr(0,2)=="ck") f.elements[i].checked = v; } </SCRIPT> <script language="JavaScript" type="text/JavaScript">  </script> <title>您想要的－www.51windows.Net</title> </head> <body onmousedown="initselect()" onmousemove=startselect() onmouseup=endselect() onselectstart="return false;" onLoad=initChkBox()> <table width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="efefef"> <tr><td> <DIV id=selectarea style="border:1px dashed black;HEIGHT: 42px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 67px; Z-INDEX: 10"> <img src="http://p1.mb5u.com/texiao/16/20100523005003120" height="1" width="1"> </DIV> <div id="Layer1" style="position:absolute; left:256px; top:39px; width:203px; height:401px; z-index:1"> <form name="form1" action=""> <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#339999"> <tr bgcolor="#FFFFFF"> <td width="13%"><input type="checkbox" name="ck1" value="checkbox"></td> <td width="87%"> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck2" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck3" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck4" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck5" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck6" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck7" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck8" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck9" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck10" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck11" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck12" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck13" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck14" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck15" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck16" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck17" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck18" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck19" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck20" value="checkbox"></td> <td> </td> </tr> <tr bgcolor="#FFFFFF"> <td><input type="checkbox" name="ck21" value="checkbox"></td> <td> </td> </tr> </table> <input type="checkbox" name="allsel" value="checkbox" onclick="change(this.checked)"> <button onClick="checkAll()">清空</button> </form> </div> </td></tr> </table> </body> </html>

查看原文