この記事では、JavaScriptの例を共有して、マウスボックス選択操作を実装しています。特定のコンテンツは次のとおりです
複製画像:
コード:
<html> <head> </head> <style> body {padding:100px;} .filediv {float:left; width:100px; height:100px; text-align:center-height:100px; font-size:12px; border:1px solid#ccc; magnid-right:1px solid:1px-right:10px; magne-righn red; background-color:#d6dff7;} </style> <スクリプトタイプ= "text/javascript">(function.onmousedown = function(){var sellenodes = document.getelementsbytagname( "div"); (i] .classname.indexof( "filenodes =" filediv "; (evt.y || evt.clienty); var seldiv.createelement( "div"); #0099ff; background-color:#c3d5ed; z-index:1000; filter:alpha(ofacity:60); ofacity:0.6; display:none; "; seldiv.id =" selectdiv "; document.body.appendchild(seldiv); seldiv.style.left = stardiv.style.tyle.tyle.tyle.tyle.tyle.tyle.tyle.tyle. _x = null _ null(evt) evt.clientx); seldiv.style.height = math.abs(_y -starty) + "px"; ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ = selDiv.offsetTop; var _w = selDiv.offsetWidth, _h = seldiv.offseetheight; _w && sellist [i] .offsettop <_t + _h){if(sellist [i] .classname.indexof( "seled")== -1){sellassname = sellist [i] .classname + "seled"}} sellist [i] classname = "filediv"; null、startx = null、starty = null、evt = null;関数ClearEventBubble(evt){if(evt.stoppropagation)evt.stoppropagation(); else evt.cancelbubble = true; if(evt.preventdefault)evt.preventdefault(); else evt.returnvalue = false; }関数showseldiv(arr){var count = 0; var selinfo = ""; for(var i = 0; i <arr.length; i ++){if(arr [i] .classname.indexof( "seled")!= -1){count ++; selinfo + = arr [i] .innerhtml + "/n"; }} alert( "select" + count + "ファイル: /n" + selinfo); } </script> <body> <div> file1 </div> <div> div> div> <div> file3 </div> <div> div> <div> div> file5 </div> <div> div> div> div> div </div> <div> file8 </div> <div> div> </html> </html> </html> </html> </html>上記はこの記事に関するものです。すべての人の学習に役立つことを願っています。