代码来自网络
<html><head></head>
<style>
body
{
padding-top: 50px; padding-left: 100px; padding-right: 150px;
} .fileDiv { float: left; width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 12px; border: 1px solid #cccccc; margin-right: 10px; margin-bottom: 10px; } .seled { border: 1px solid #ff0000; background-color: #D6DFF7;
}</style><script type="text/javascript"> /*--------------------------------- 以下4个方法 摘自网络 ----------------------------------------*/ Array.prototype.remove = function(item) { for (var i = 0; i < this.length; i++) { if (item == this[i]) break; } if (i == this.length) return; for (var j = i; j < this.length - 1; j++) { this[j] = this[j + 1]; } this.length--; } String.prototype.replaceAll = function(AFindText, ARepText) { raRegExp = new RegExp(AFindText, "g"); return this.replace(raRegExp, ARepText); } function getAllChildren(e) { return e.all ? e.all : e.getElementsByTagName('*'); } document.getElementsBySelector = function(selector) { if (!document.getElementsByTagName) { return new Array(); } var tokens = selector.split(' '); var currentContext = new Array(document); for (var i = 0; i < tokens.length; i++) { token = tokens[i].replace(/^\s+/, '').replace(/\s+$/, ''); ; if (token.indexOf('#') > -1) { var bits = token.split('#'); var tagName = bits[0]; var id = bits[1]; var element = document.getElementById(id); if (tagName && element.nodeName.toLowerCase() != tagName) { return new Array(); } currentContext = new Array(element); continue; } if (token.indexOf('.') > -1) { var bits = token.split('.'); var tagName = bits[0]; var className = bits[1]; if (!tagName) { tagName = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (found[k].className && found[k].className.match(new RegExp('\\b' + className + '\\b'))) { currentContext[currentContextIndex++] = found[k]; } } continue; } if (token.match(/^(\w*)\[(\w+)([=~\|\^\$\*]?)=?"?([^\]"]*)"?\]$/)) { var tagName = RegExp.$1; var attrName = RegExp.$2; var attrOperator = RegExp.$3; var attrValue = RegExp.$4; if (!tagName) { tagName = '*'; } var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements; if (tagName == '*') { elements = getAllChildren(currentContext[h]); } else { elements = currentContext[h].getElementsByTagName(tagName); } for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = new Array; var currentContextIndex = 0; var checkFunction; switch (attrOperator) { case '=': checkFunction = function(e) { return (e.getAttribute(attrName) == attrValue); }; break; case '~': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('\\b' + attrValue + '\\b'))); }; break; case '|': checkFunction = function(e) { return (e.getAttribute(attrName).match(new RegExp('^' + attrValue + '-?'))); }; break; case '^': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) == 0); }; break; case '$': checkFunction = function(e) { return (e.getAttribute(attrName).lastIndexOf(attrValue) == e.getAttribute(attrName).length - attrValue.length); }; break; case '*': checkFunction = function(e) { return (e.getAttribute(attrName).indexOf(attrValue) > -1); }; break; default: checkFunction = function(e) { return e.getAttribute(attrName); }; } currentContext = new Array; var currentContextIndex = 0; for (var k = 0; k < found.length; k++) { if (checkFunction(found[k])) { currentContext[currentContextIndex++] = found[k]; } } continue; } tagName = token; var found = new Array; var foundCount = 0; for (var h = 0; h < currentContext.length; h++) { var elements = currentContext[h].getElementsByTagName(tagName); for (var j = 0; j < elements.length; j++) { found[foundCount++] = elements[j]; } } currentContext = found; } return currentContext; } /*--------------------------------------------------------------------------------------------------------*/ /** * author: 王永山 * version: 1.1 beta * date: 2008-09-09 * email: [email]wangys0927@163.com[/email] * * update: * 1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ， * 2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）； * 3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。 * 4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。 */ function addEvent(eventType, eventFunc, eventObj) { eventObj = eventObj || document; if (window.attachEvent) eventObj.attachEvent("on" + eventType, eventFunc); if (window.addEventListener) eventObj.addEventListener(eventType, eventFunc, false); } function clearEventBubble(evt) { evt = evt || window.event; if (evt.stopPropagation) evt.stopPropagation(); else evt.cancelBubble = true; if (evt.preventDefault) evt.preventDefault(); else evt.returnValue = false; } function posXY(event) { event = event || window.event; var posX = event.pageX || (event.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)); var posY = event.pageY || (event.clientY + (document.documentElement.scrollTop || document.body.scrollTop)); return { x: posX, y: posY }; } //----------- 区域选择关键方法 ----------------------- var _selectedRegions = []; function RegionSelect(selRegionProp) { this.regions = []; var _regions = document.getElementsBySelector(selRegionProp["region"]); if (_regions && _regions.length > 0) { var _self = this; for (var i = 0; i < _regions.length; i++) { _regions[i].onmousedown = function() { var evt = window.event || arguments[0]; if (!evt.shiftKey && !evt.ctrlKey) { // 清空所有select样式 _self.clearSelections(_regions); this.className += " " + _self.selectedClass; // 清空selected数组，并加入当前select中的元素 _selectedRegions = []; _selectedRegions.push(this); } else { if (this.className.indexOf(_self.selectedClass) == -1) { this.className += " " + _self.selectedClass; _selectedRegions.push(this); } else { this.className = this.className.replaceAll(_self.selectedClass, ""); _selectedRegions.remove(this); } } clearEventBubble(evt); } this.regions.push(_regions[i]); } } this.selectedClass = selRegionProp["selectedClass"]; this.selectedRegion = []; this.selectDiv = null; this.startX = null; this.startY = null; } RegionSelect.prototype.select = function() { var _self = this; addEvent("mousedown", function() { var evt = window.event || arguments[0]; _self.onBeforeSelect(evt); clearEventBubble(evt); }, document); addEvent("mousemove", function() { var evt = window.event || arguments[0]; _self.onSelect(evt); clearEventBubble(evt); }, document); addEvent("mouseup", function() { _self.onEnd(); }, document); } RegionSelect.prototype.onBeforeSelect = function(evt) { // 创建模拟 选择框 if (!document.getElementById("selContainer")) { this.selectDiv = document.createElement("div"); this.selectDiv.style.cssText = "position:absolute;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;"; this.selectDiv.id = "selContainer"; document.body.appendChild(this.selectDiv); } else { this.selectDiv = document.getElementById("selContainer"); } this.startX = posXY(evt).x; this.startY = posXY(evt).y; this.isSelect = true; } RegionSelect.prototype.onSelect = function(evt) { var _self = this; if (_self.isSelect) { if (_self.selectDiv.style.display == "none") _self.selectDiv.style.display = ""; var posX = posXY(evt).x; var poxY = posXY(evt).y; _self.selectDiv.style.left = Math.min(posX, this.startX); _self.selectDiv.style.top = Math.min(poxY, this.startY); _self.selectDiv.style.width = Math.abs(posX - this.startX); _self.selectDiv.style.height = Math.abs(poxY - this.startY); var regionList = _self.regions; for (var i = 0; i < regionList.length; i++) { var r = regionList[i], sr = _self.innerRegion(_self.selectDiv, r); if (sr && r.className.indexOf(_self.selectedClass) == -1) { r.className = r.className + " " + _self.selectedClass; _selectedRegions.push(r); } else if (!sr && r.className.indexOf(_self.selectedClass) != -1) { r.className = r.className.replaceAll(_self.selectedClass, ""); _selectedRegions.remove(r); } } } } RegionSelect.prototype.onEnd = function() { if (this.selectDiv) { this.selectDiv.style.display = "none"; } this.isSelect = false; //_selectedRegions = this.selectedRegion; } // 判断一个区域是否在选择区内 RegionSelect.prototype.innerRegion = function(selDiv, region) { var s_top = parseInt(selDiv.style.top); var s_left = parseInt(selDiv.style.left); var s_right = s_left + parseInt(selDiv.offsetWidth); var s_bottom = s_top + parseInt(selDiv.offsetHeight); var r_top = parseInt(region.offsetTop); var r_left = parseInt(region.offsetLeft); var r_right = r_left + parseInt(region.offsetWidth); var r_bottom = r_top + parseInt(region.offsetHeight); var t = Math.max(s_top, r_top); var r = Math.min(s_right, r_right); var b = Math.min(s_bottom, r_bottom); var l = Math.max(s_left, r_left); if (b > t + 5 && r > l + 5) { return region; } else { return null; } } RegionSelect.prototype.clearSelections = function(regions) { for (var i = 0; i < regions.length; i++) { regions[i].className = regions[i].className.replaceAll(this.selectedClass, ""); } } function getSelectedRegions() { return _selectedRegions; } /*-------------------------------------- 区域选择方法结束 --------------------------------------------*/ function showSelDiv() { var selInfo = ""; var arr = getSelectedRegions(); for (var i = 0; i < arr.length; i++) { selInfo += arr[i].innerHTML + "\n"; } alert("共选择 " + arr.length + " 个文件，分别是：\n" + selInfo); } </script><body> <button onclick="showSelDiv();"> getRegions</button> <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> <div class="fileDiv"> file10</div> <div class="fileDiv"> file11</div> <div class="fileDiv"> file12</div> <div class="fileDiv"> file13</div> <div class="fileDiv"> file14</div> <div class="fileDiv"> file15</div> <div class="fileDiv"> file16</div> <div class="fileDiv"> file17</div> <div class="fileDiv"> file18</div> <div class="fileDiv"> file19</div> <div class="fileDiv"> file20</div> <div class="fileDiv"> file21</div> <div class="fileDiv"> file22</div> <div class="fileDiv"> file23</div> <div class="fileDiv"> file24</div> <div class="fileDiv"> file25</div> <div class="fileDiv"> file26</div> <div class="fileDiv"> file27</div> <div class="fileDiv"> file28</div> <div class="fileDiv"> file29</div> <div class="fileDiv"> file30</div> <div class="fileDiv"> file31</div> <div class="fileDiv"> file32</div> <div class="fileDiv"> file33</div> <div class="fileDiv"> file34</div> <div class="fileDiv"> file35</div> <div class="fileDiv"> file36</div> <div class="fileDiv"> file37</div> <div class="fileDiv"> file38</div> <div class="fileDiv"> file39</div> <div class="fileDiv"> file40</div> <div class="fileDiv"> file41</div> <div class="fileDiv"> file42</div> <div class="fileDiv"> file43</div> <div class="fileDiv"> file44</div> <div class="fileDiv"> file45</div> <div class="fileDiv"> file46</div> <div class="fileDiv"> file47</div> <div class="fileDiv"> file48</div> <div class="fileDiv"> file49</div> <div class="fileDiv"> file50</div> <div class="fileDiv"> file51</div> <div class="fileDiv"> file52</div> <div class="fileDiv"> file53</div> <div class="fileDiv"> file54</div> <div class="fileDiv"> file55</div> <div class="fileDiv"> file56</div> <div class="fileDiv"> file57</div> <div class="fileDiv"> file58</div> <div class="fileDiv"> file59</div> <div class="fileDiv"> file60</div> <div style="float: left; 100%;"> <button onclick="showSelDiv();"> getRegions</button></div></body><script> new RegionSelect({ region: 'div.fileDiv', selectedClass: 'seled' }).select(); </script></html>