Javascript实现鼠标框选操作  不是点击选取

 更新时间:2016年04月14日 14:30:40   投稿:lijiao  
这篇文章主要介绍了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> 

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

相关文章

  • javascript 获取图片尺寸及放大图片

    javascript 获取图片尺寸及放大图片

    获取图片尺寸(不设置宽高)及放大图片:利用了IE的私有属性防止图片放大失真严重!感兴趣的朋友可以参考下
    2013-09-09
  • 详解Js中的模块化是如何实现的

    详解Js中的模块化是如何实现的

    这篇文章主要介绍了详解Js中的模块化是如何实现的,详细的介绍了模块化的运行,具有一定的参考价值,有兴趣的可以了解下
    2017-10-10
  • 不使用浏览器运行javascript代码的方法

    不使用浏览器运行javascript代码的方法

    用js写一段小程序,但是又觉得使用浏览器去运行挺麻烦的,下面为大家介绍下如何使用java程序调用javascript程序,有类似需求的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • 如何提高javascript加载速度

    如何提高javascript加载速度

    本文主要对提高javascript加载速度的方法进行介绍,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • JavaScript快速排序

    JavaScript快速排序

    JavaScript快速排序...
    2007-01-01
  • 选择与取消选择不错的应用 js

    选择与取消选择不错的应用 js

    选择与取消选择不错的应用 js...
    2006-12-12
  • 详解JS中的reduce fold unfold用法

    详解JS中的reduce fold unfold用法

    这篇文章主要介绍了JS中的reduce fold unfold用法,想深入了解JS的同学,一定要看下
    2021-05-05
  • JavaScript URL参数读取改进版

    JavaScript URL参数读取改进版

    此前发表的那一版确实能不用循环,但是总用正则表达式的替换,不一定比用循环提高性能,而且把程序搞得有些太复杂了。从《JavaScript权威指南》上学到的范例如下
    2009-01-01
  • H5+css3+js搭建带验证码的登录页面

    H5+css3+js搭建带验证码的登录页面

    这篇文章主要为大家详细介绍了H5+css3+js搭建带验证码的登录页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • 搞定immutable.js详细说明

    搞定immutable.js详细说明

    Immutable Data是指一旦被创造后,就不可以被改变的数据。通过使用Immutable Data,可以让我们更容易的去处理缓存、回退、数据变化检测等问题,简化我们的开发
    2016-05-05

最新评论