Javascript实现鼠标框选操作 不是点击选取_

1、Javascript实现鼠标框选操作 不是点击选取_ 本文实例为大家分享了Javascript实现鼠标框选操作，绝不是点击选取，供大家参考，具体内容如下 效果图： 代码： html head/head style bodypadding:100px; .fileDivfloat:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px; .seledborder:1px so

2、lid red;background-color:#D6DFF7; /style script type=text/javascript (function() document.onmousedown = function() var selList = ; var fileNodes = document.getElementsByTagName(div); for ( var i = 0; i fileNodes.length; i+) if (fileNodesi.className.indexOf(fileDiv) != -1) fileNodesi.className = file

3、Div; selList.push(fileNodesi); var isSelect = true; var evt = window.event | arguments0; var startX = (evt.x | evt.clientX); var startY = (evt.y | evt.clientY); var selDiv = document.createElement(div); selDiv.style.cssText = position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0p

4、x;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none; selDiv.id = selectDiv; document.body.appendChild(selDiv); selDiv.style.left = startX + px; selDiv.style.top = startY + px; var _x = null; var _y = null; clearEventBubble(evt); documen

5、t.onmousemove = function() evt = window.event | arguments0; if (isSelect) if (selDiv.style.display = none) selDiv.style.display = ; _x = (evt.x | evt.clientX); _y = (evt.y | evt.clientY); selDiv.style.left = Math.min(_x, startX) + px; selDiv.style.top = Math.min(_y, startY) + px; selDiv.style.width

6、= Math.abs(_x - startX) + px; selDiv.style.height = Math.abs(_y - startY) + px; / - 关键算法 - var _l = selDiv.offsetLeft, _t = selDiv.offsetTop; var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; for ( var i = 0; i selList.length; i+) var sl = selListi.offsetWidth + selListi.offsetLeft; var st = se

7、lListi.offsetHeight + selListi.offsetTop; if (sl _l st _t selListi.offsetLeft _l + _w selListi.offsetTop _t + _h) if (selListi.className.indexOf(seled) = -1) selListi.className = selListi.className + seled; else if (selListi.className.indexOf(seled) != -1) selListi.className = fileDiv; clearEventBub

8、ble(evt); document.onmouseup = function() isSelect = false; if (selDiv) document.body.removeChild(selDiv); showSelDiv(selList); selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; )(); function clearEventBubble(evt) if (evt.stopPropagation) evt.stopPropagat

9、ion(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; function showSelDiv(arr) var count = 0; var selInfo = ; for ( var i = 0; i arr.length; i+) if (arri.className.indexOf(seled) != -1) count+; selInfo += arri.innerHTML + n; alert(共选择 + count + 个文件，分别是：n + selInfo); /script body div class=fileDivfile1/div div class=fileDivfile2/div div class=fileDivfile3/div div class=fileDivfile4/div div class=fileDivfile5/d