js模拟电脑选择多文件夹效果_选区代码_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 #cccccc;margin-right:10px;margin-bottom:10px;} 
 .seled{border:1px solid #ff0000;background-color:#D6DFF7;} 
 </style> 
  
 (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; 
 } 
//www.gxlcms.com 脚本之家 
 function showSelDiv(arr){ 
 var count =0; 
 var selInfo = ""; 
 for(var i=0; i 
 <body> 
 file1 
 file2 
 file3 
 file4 
 file5 
 file6 
 file7 
 file8 
 file9 
 
 </body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
update:
1. 针对前2个beta版，该版本修复了前两个版本出现的 bug ，
2. 进行了代码的简单封装（由于本人初学js，对js掌握的很浅，因此面向对象的理解很差，封装的不好）；
3. 增加了对 Ctrl 和 Shift 键的支持(目前shift键的功能和ctrl键的功能一样，还不能达到仿windows的选区Shift键的功能)。
4. 增加了获取“被选区选中元素”的方法，可以点击按钮“getRegions”看效果。
调用方法：
代码如下:
new RegionSelect({
region:'div.fileDiv',
selectedClass: 'seled'
}).select();

增强效果代码

<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> 
  
/*--------------------------------- 以下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 = '*'; 
}

/*--------------------------------------------------------------------------------------------------------*/ 
/** 
* 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"看效果。 
*/

<button onclick="showSelDiv();">getRegions</button> 
 </body> 
  
new RegionSelect({ 
 region:'div.fileDiv', 
 selectedClass: 'seled' 
}).select(); 
 </ script> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

显示全文

全部频道

js模拟电脑选择多文件夹效果_选区代码_javascript技巧