本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下
效果图:
代码:
<html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;width:100px;height:100px;text-align:center;line-height:100px;font-size:12px;border:1px solid #ccc;margin-right:10px;margin-bottom:10px;} .seled{border:1px solid 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 (fileNodes[i].className.indexOf("fileDiv") != -1) { fileNodes[i].className = "fileDiv"; selList.push(fileNodes[i]); } } var isSelect = true; var evt = window.event || arguments[0]; 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:0px;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); document.onmousemove = function() { evt = window.event || arguments[0]; 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 = 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 = selList[i].offsetWidth + selList[i].offsetLeft; var st = selList[i].offsetHeight + selList[i].offsetTop; if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) { if (selList[i].className.indexOf("seled") == -1) { selList[i].className = selList[i].className + " seled"; } } else { if (selList[i].className.indexOf("seled") != -1) { selList[i].className = "fileDiv"; } } } } clearEventBubble(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.stopPropagation(); 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 (arr[i].className.indexOf("seled") != -1) { count++; selInfo += arr[i].innerHTML + "\n"; } } alert("共选择 " + count + " 个文件,分别是:\n" + selInfo); } </script> <body> <div class="fileDiv">file1</div> <div class="fileDiv">file2</div> <div class="fileDiv">file3</div> <div class="fileDiv">file4</div> <div class="fileDiv">file5</div> <div class="fileDiv">file6</div> <div class="fileDiv">file7</div> <div class="fileDiv">file8</div> <div class="fileDiv">file9</div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“Javascript实现鼠标框选操作 不是点击选取”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7