本文实例为大家分享了Javascript实现鼠标框选操作,绝不是点击选取,供大家参考,具体内容如下

效果图:

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> 

以上就是本文的全部内容,希望对大家的学习有所帮助。

标签:
js鼠标框选,js鼠标框选操作,js鼠标点击选取

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。