WEB开发网
开发学院网页设计JavaScript js模拟电脑选择多文件夹效果_选区代码 阅读

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

 2010-09-14 13:28:50 来源:WEB开发网   
核心提示:按住鼠标键不动,拖动鼠标,js模拟电脑选择多文件夹效果_选区代码,会看到效果运行可以看到效果<html><head></head><style>body{padding:100px;}.fileDiv{float:left;width:100px;height:100px

按住鼠标键不动,拖动鼠标,会看到效果

运行可以看到效果

<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.xywxusedown = 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<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>

Tags:js 模拟 电脑

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接