软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：js,选区

<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> 
    <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; 
    } 
//www.jb51.net 脚本之家   
    function showSelDiv(arr){ 
         var count =0; 
         var selInfo = ""; 
         for(var i=0; i     
    <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>

技术文章快速查找

让GoogleCode的SVN下的HTML文件在FireFox下正常显示.

使用Javascript巧妙获取滚动条位置

jquery tab插件制作实现代码

jQuery 跨域访问问题解决方法

js链接确认提醒功能

javascript hasFocus使用实例

理解Javascript_05_原型继承原理

基于JQuery的访问WebService的代码（可访问Java[Xfire]）

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建