用javascript实现鼠标框选

2016-06-04 15:13:23 88必发客户端

起初是打算兼容 Netscape 和 FireFox 等浏览器的,但这些浏览器中不支持 style.pixelLeft,得使用 style.left 之类的(style.pixelLeft 为数字无单位,style.left 为文本有单位),实际使用中发现效果很不好,有延迟状,所以还是使用 style.pixelLeft,缺点是仅支持 IE 系列浏览器。 鼠标框选框 <!-- var box = document.getElementById("box"); var boxWorking = false; var startPointX = 0; var startPointY = 0; //将要移动鼠标,准备鼠标框选框,设置相关数据 //仅鼠标左键或右键时有效 //在客户区有效,在滚动条区域无效(滚动条区域属document.body,但不属于document.body的客户区) function StartBox() { //鼠标键判断 if (event.button!=1 && event.button!=2) { return; } //鼠标位置判断 if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight) { return; } startPointX = document.body.scrollLeft + event.clientX; startPointY = document.body.scrollTop + event.clientY; box.style.pixelLeft = startPointX; box.style.pixelTop = startPointY; box.style.pixelWidth = 0; box.style.pixelHeight = 0; box.style.display = "block"; boxWorking = true; } //改变鼠标框选框大小 function ResizeBox() { //必须要先按下鼠标左键或右键 if (!boxWorking) { return; } var endPointX = document.body.scrollLeft + event.clientX; var endPointY = document.body.scrollTop + event.clientY; //鼠标左移还是右移 if (endPointX >= startPointX ) { box.style.pixelLeft = startPointX; box.style.pixelWidth = endPointX - startPointX; } else { box.style.pixelLeft = endPointX; box.style.pixelWidth = startPointX - endPointX; } //鼠标上移还是下移 if (endPointY >= startPointY ) { box.style.pixelTop = startPointY; box.style.pixelHeight = endPointY - startPointY; } else { box.style.pixelTop = endPointY; box.style.pixelHeight = startPointY - endPointY; } } //鼠标移动结束,隐藏鼠标框选框,设置相关数据 //仅鼠标左键或右键时有效 function EndBox() { //鼠标键判断 if (event.button!=1 && event.button!=2) { return; } box.style.display = "none"; boxWorking = false; } document.body.onmousedown= StartBox; document.body.onmousemove = ResizeBox; document.body.onmouseup = EndBox; //--> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]下面这个只在区域内有效 鼠标框选框 <!-- var content = document.getElementById("content"); var box = document.getElementById("box"); var boxWorking = false; var startPointX = 0; var startPointY = 0; //将要移动鼠标,准备鼠标框选框,设置相关数据 //仅鼠标左键或右键时有效 //在客户区有效,在滚动条区域无效(滚动条区域属document.body,但不属于document.body的客户区) function StartBox() { //鼠标键判断 if (event.button!=1 && event.button!=2) { return; } //鼠标位置判断 if (event.clientX>document.body.clientWidth || event.clientY>document.body.clientHeight) { return; } startPointX = document.body.scrollLeft + event.clientX; startPointY = document.body.scrollTop + event.clientY; box.style.pixelLeft = startPointX; box.style.pixelTop = startPointY; box.style.pixelWidth = 0; box.style.pixelHeight = 0; box.style.display = "block"; boxWorking = true; } //改变鼠标框选框大小 function ResizeBox() { //必须要先按下鼠标左键或右键 if (!boxWorking) { return; } var endPointX = document.body.scrollLeft + event.clientX; var endPointY = document.body.scrollTop + event.clientY; //鼠标左移还是右移 if (endPointX >= startPointX ) { endPointX = (endPointX<=(content.offsetLeft+content.offsetWidth))?endPointX:(content.offsetLeft + content.offsetWidth); box.style.pixelLeft = startPointX; box.style.pixelWidth = endPointX - startPointX; } else { endPointX = (endPointX>=content.offsetLeft)?endPointX:content.offsetLeft; box.style.pixelLeft = endPointX; box.style.pixelWidth = startPointX - endPointX; } //鼠标上移还是下移 if (endPointY >= startPointY ) { endPointY = (endPointY<=(content.offsetTop+content.offsetHeight))?endPointY:(content.offsetTop + content.offsetHeight); box.style.pixelTop = startPointY; box.style.pixelHeight = endPointY - startPointY; } else { endPointY = (endPointY>=content.offsetTop)?endPointY:content.offsetTop; box.style.pixelTop = endPointY; box.style.pixelHeight = startPointY - endPointY; } } //鼠标移动结束,隐藏鼠标框选框,设置相关数据 //仅鼠标左键或右键时有效 function EndBox() { //鼠标键判断 if (event.button!=1 && event.button!=2) { return; } box.style.display = "none"; boxWorking = false; } content.onmousedown= StartBox; document.body.onmousemove = ResizeBox; document.body.onmouseup = EndBox; //--> [Ctrl+A 全选 注:

JavaScript为我们提供几种对话框功能,但功能都十分有限;虽然在IE下可以通过模式窗体的方式创建更丰富的对话框功能,但毕竟只有IE得到支持。为了得到更丰富的自定义对话框功能,于是用JQuery编写了一个对话框插件;只需简单地引用相关JavaScript就能得到丰富的自定义对话框功能。 插件功能特点:        允许通过CSS进行外观控制。        可以任意把面页的元素作为对话框显示。        当对话框激活时,对话框外的任何元素不能接受鼠标操作。        对话框可以在工作区范围内任意移动,根据工作区大小自适应居中功能。        并不需要编写复杂的JavaScript,通过简单HTML属性描述即可。        经过测试插件可以在Firefox和IE下正常工作。 简单使用描述:        引用JQuery和对话框插件文件:        <script src=jquery-latest.js></script> <script src=messageBox.js></script>           定义相关按钮为行:        <input id="Button4" type="button" value="提问对话框"              showoption="control:test2;width:220;height:120;title:对话框" />        定义相关对话框显示的内容:     <div id="test2" style="display:none">         <table style="width: 200px">             <tr>                 <td >                     JQuery模式对话框插件好用吗?</td>             </tr>             <tr>                 <td align="right" >                     <input id="Button2" onclick="CloseMessageBox()" type="button" value="是" />                     <input id="Button6" onclick="CloseMessageBox()" type="button" value="否" /></td>             </tr>         </table>     </div> 下载例程和源码复制代码 代码如下:/* JQuery 模式对话框插件   * writer: FanJianHan ([email protected])   * License: GPL (GPL-LICENSE.txt) licenses.   */   //是否已初始化过对话框  var MessageOninit = false;  //记录body滚动条的x,y偏移量;显示内容的元素对象,显示内容元素对象的父对象  var MessageBox_scrolltop,MessageBox_scrollleft,Messagebox_AC,MessageBox_PC;  //对话框对象,对话框宽度,对话框高度  var MessageBox_win,MessageBox_width,MessageBox_height;  //对话框是否处于移动状态  var MessageBox_Moving = false;  //显示模式提示框  function ShowMessageBox(option)  {      var container,iframe,enabled,enabledframe;      var height=400;      var width =400;      MessageBox_scrolltop =0;      MessageBox_scrollleft =0;      if(!MessageOninit)      {         CreateContainer(option);         MessageOninit = true;         $('#messagebox_close').click(function(){               CloseMessageBox();         });         $(window).resize(function(){              SetStyle(option);              SetEnabledStyle();         });         $(window).scroll(function(e){              MessageBox_scrolltop =document.documentElement.scrollTop;              MessageBox_scrollleft = document.documentElement.scrollLeft;              SetEnabledStyle();         });         MessageBox_win = $("#messagebox_win");         $('#messagebox_title').mousedown(handleMouseDown);         $('#messagebox_title').mouseup(handleMouseUp);         $('#messagebox_title').mousemove(handleMouseMove);         document.onmouseup = handleMouseUp;      }      if(option.height)          height = parseInt(option.height);      if(option.width)          width = parseInt(option.width);      MessageBox_height = height;      MessageBox_width = width;      Messagebox_AC = $('#'+option.control);      MessageBox_PC = Messagebox_AC.parent();      Messagebox_AC.css('display','');      enabled='<div id="messagebox_enabled" style="background-color: lightgrey;width:100%;height:100%;position:absolute;z-index:99998;"></div>'      enabledframe='<iframe id="messagebox_enabledframe"  frameborder=0 scrolling=no style="position:absolute; visibility:inherit; top:0px; left_0px; width:100%;height:100%;z-index:99997; "></iframe>';      $('#messagebox_enabledframe').remove()_      $('#messagebox_enabled').remove();      $('#messagebox_title').html(option.title);      $('#messagebox_from').append(Messagebox_AC);      SetStyle(option);      $(document.body).append(enabledframe);      $(document.body).append(enabled);      SetEnabledStyle();      $('#messagebox_win').fadeIn("slow");      //创建对话框容器      function CreateContainer(option)      {          var html;          html='<div id="messagebox_win" style="position:absolute;z-index:99999;"><table  cellpadding="0" cellspacing="0" id="messagebox_table"><tr><td id="messagebox_title_td"><table id="messagebox_title_table" ><tr><td style="width:99%;" ><div id="messagebox_title" style="width:100%;cursor: default;"></div></td><td><button id="messagebox_close"></button></td></tr></table></td></tr><tr id="messagebox_body_td"><td valign="top" ><div id="messagebox_from" style="text-align: center;"></div></td></tr></table></div>';          if(option.parent)          {              $('#' + option.parent).append(html);          }          else          {              $(document.body).append(html);          }      }      //设置显示时背景式样      function SetEnabledStyle()      {          var de,w,h,css,region;          region = GetDocumentRegion();          css ={width:region.width+"px",height:region.height+"px",          left: MessageBox_scrollleft+'px',top: MessageBox_scrolltop +'px'}          GetOpacity(css);          $("#messagebox_enabled").css(css);          $("#messagebox_enabledframe").css(css);      }      //设置透明式样      function GetOpacity(css)      {          if(window.navigator.userAgent.indexOf('MSIE')>=1)          {              css.filter= 'progid:DXImageTransform.Microsoft.Alpha(opacity=30)';          }          else          {              css.opacity= '0.3';          }         }      //设置对话框试样      function SetStyle(option)      {          var region,css;          region = GetDocumentRegion();          css ={width:MessageBox_width+'px',height:MessageBox_height+'px',          left: ((region.width - MessageBox_width)/2)+'px',top: ((region.height - MessageBox_height)/2)+'px'}          if(region.height < MessageBox_height )//如果body显示的高度小于对话框高度          {              css.top=10+'px';          }          else          {              css.top=((region.height - MessageBox_height)/2)+'px'          }          $('#messagebox_win').css(css);          css.top='0px';          css.left='0px';          $('#messagebox_table').css(css);          css.width='100%';          css.height='16px';          $('#messagebox_title_td').css(css);          css.height= height-46 +'px';          $('#messagebox_body_td').css(css);      }      var down_x,down_y,cx,cy;      function handleMouseDown(e)      {              var evt = e || event;           down_x=evt.clientX;           down_y = evt.clientY;           cx =(parseInt(MessageBox_win.css('left'))|0);           cy = (parseInt(MessageBox_win.css('top'))|0)           MessageBox_Moving= true;3           document.documentElement.onselectstart = function(){return false};           document.documentElement.ondrag = function(){return false};           document.onmousemove = handleMouseMove;           $(document.body).append('<div id="messagebox_move" style="position: absolute; z-index:100000;border-right: midnightblue 1px dashed; border-top: midnightblue 1px dashed; border-left: midnightblue 1px dashed; border-bottom: midnightblue 1px dashed;"></div>');           $('#messagebox_move').css('width',MessageBox_win.css('width'));           $('#messagebox_move').css('height',MessageBox_win_u99 ?ss('height'));           $('#messagebox_move').css('left',MessageBox_win.css('left'));           $('#messagebox_move').css('top',MessageBox_win.css('top'));      }      function GetDocumentRegion()      {          var w,h,de;          de = document.documentElement;          w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;          h = self.innerHeight || (de&&de.clientHeight)|| document.body.clientHeight;          return {height:h,width:w};      }      function handleMouseMove(e)      {          var left,top,region;          if (MessageBox_Moving)          {              var evt = e || event;              left =evt.clientX+cx-down_x;              top = evt.clientY+cy-down_y;              region = GetDocumentRegion();              if(left+ MessageBox_width > region.width)              {                  left = region.width - 10- MessageBox_width;              }              if(top + MessageBox_height >region.height)3              {                  top = region.height-10 - MessageBox_height;              }              if(left <10)                  left =10;              if(top <10)                  top =10;              var css ={left:left+'px',top:top+'px'}              $('#messagebox_move').css(css);          }      }      function handleMouseUp()      {          if(MessageBox_Moving)          {              MessageBox_win.css('width',$('#messagebox_move').css("width"));              MessageBox_win.css('height',$('#messagebox_move').css("height"));              MessageBox_win.css('left',$('#messagebox_move').css("left"));              MessageBox_win.css('top',$('#messagebox_move').css("top"));          }          MessageBox_Moving _u61 ? false;          document.onmousemove = null;         $('#messagebox_move').remove();      }  }  //关闭模式对话框  function CloseMessageBox()  {      if(MessageOninit)      {         $('#messagebox_win').hide();         $('#messagebox_enabled').remove();         $('#messagebox_enabledframe').remove();        Messagebox_AC.css('display','none');         MessageBox_PC.append(Messagebox_AC);      }       document.documentElement.onselectstart = null;           document.documentElement.ondrag = null;  }  $(document).ready(function(){      $(document).find('[@showoption]').each(function(){          var namevalue;          //虽然显示的元素id,显示宽度,显示高度,标题,对话框寄居的元素对象id          var option={control:'',width:'400',height:'400',title:'',parent:null};          var properties = $(this).attr('showoption').split(';');           for(i=0;i<properties.length;i++)          {              namevalue = properties[i].split(':

使用js或者jquery查找父元素、子元素经常遇到。可是用起来总容易混淆,这里统一总结了一下,以后用起来相信会方便好多 这里jquery向上查找父元素 用到的方法:closest() parents() parent() 向下查找子元素 用到的方法:find() children() js用的是 children[] 属性 html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery查找父元素子元素</title> </head> <body> <div class="div1" id="div1" name="mydiv"> <p>段落1 查找父元素</p> <table id="table1"> <tbody id="tbody1"> <tr> <td id="mytd1">11closest()向上查找最近的元素(返回零个或一个元素的 jQuery 对象)</td> </tr> <tr id="mytr2"> <td id="mytd2">21parent()方法</td> </tr> <tr> <td id="mytd3">31parent("选择器")方法</td> </tr> </tbody> </table> </div> <hr> <div id="div2" style="border-bottom :5px;" name="mydiv"> <p>段落2 查找子元素</p> <table id="table2"> <tbody> <tr> <td id="sectd1">查找table2的td find()方法</td> </tr> <tr id="sectr2"> <td id="sectd2">查找table2的td children()方法</td> </tr> <tr> <td id="sectd3">js的children[]属性来查找</td> </tr> </tbody> <tbody> <tr> <td>tbody2222</td> </tr> </tbody> </table> </div> </body> </html> js代码: 复制代码 代码如下: <script type="text/javascript" src="./js/jquery-1.7.2.js"></script> <script> $(function(){ /************ 查找父元素 *************/ //closest()方法 $("#mytd1").bind("click",function(){ //alert($(this).html()); alert($(this).closest("table").attr("id")); //table1而不是table0 //alert($(this).closest("table").html()); }); //parent()方法 $("#mytd2").bind("click",function(){ //alert($(this).html()); //$(this).html()是21 (this).attr("id")是mytd2 alert($(this).parent().parent().parent().attr("id")); //.parent()是tr 第二个.parent是tbody。即使没有tbody标签,找到的也是tbody 第三个.parent()是table //document.write("第一个parent的id:" + $(this).parent().attr("id") + "。 第二个parent的id是:"+$(this).parent().parent().attr("id") + "。 第三个parent的id是:"+$(this).parent().parent().parent().attr("id")); }); //parent("选择器") parents("选择器") $("#mytd3").bind("click",function(){ $("p").parent("#div1").css("background", "yellow");//这里换成了p标签。不知道为什么用this找不到元素 //alert($(this).parent("#div").attr("id"));//undefined alert($(this).parents("div").attr("id"));//div1 注意一个parent parents }); /************ 查找子元素 *************/ //查找table2的td元素 find() $("#sectd1").bind("click",function(){ alert($("#table2").find("td").length); /* $("#table2").find("td").each(function(index,element){ alert($(element).text()); }); */ }); //children() $("#sectd2").bind("click",function(){ var table = $("#table2"); alert($("#table2").children().children().children("td[id='sectd2']").html()); //children() 是 tbody children()是 tr children("td[id='sectd2']")是td }); // js的 children[] $("#sectd3").bind("click",

系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素。 本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置。适用于页面任何元素的位置效果。 首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js 源码下载地址 编写实现效果js文件,qfocus.js,源码如下: 复制代码 代码如下: var qfocus = { config:{ "bar_dis":true,//横竖条显示或隐藏 "circle_dis":true,//焦点隐藏 "bar_color":"black",//线条颜色 "circle_color":"red",//圆圈颜色 "rect_color":"green"//方块颜色 }, locationTimer: null,//时间控制标识符 onmouseClick: function(ev){//鼠标点击获取鼠标位置画聚焦效果 var point = this.mousePosition(ev); this.showFocus(point); }, onclickElement:function(obj) {//鼠标点击获取坐标做焦点 var _point = this.elementPosition(obj); this.showFocus(_point); }, showFocus:function (point) {//显示焦点效果 if (this.locationTimer) { clearTimeout(this.locationTimer); } //清除定时器 var mapDiv = "#mapdiv"; var _point = point; var canvas = $("#canvas"); var vLine = $("#vline"); var hLine = $("#hline"); //焦点隐藏或显示 if (this.config["circle_dis"] == true) { if (!$("#canvas").attr("id")) { canvas = '<div id="canvas" style="left:' + (_point.x - 25) + 'px;top:' + (_point.y - 25) + 'px;width:50px;height:50px;overflow:hidden;position:absolute;border:solid 0px red;"/>'; $(canvas).appendTo("body"); } else { canvas.css("left", (_point.x - 25) + "px"); canvas.css("top", (_point.y - 25) + "px"); canvas.show(); } paper = Raphael("canvas"); paper.clear(); var rect = paper.rect(20, 20, 10, 10, 0); rect.attr("stroke", this.config["rect_color"]); rect.attr("stroke-width", 1); } //是否显示横竖条 if (this.config["bar_dis"] == true) { if (!$("#vline").attr("id")) { vLine = "<div id='vline' style='background-color:"+this.config["bar_color"]+";height:100%;width:1px;position:absolute;top:0px;left:" + (_point.x) + "px;'/>"; $(vLine).appendTo("body"); } else { $(vLine).css("left",(_point.x) + "px"); vLine.show(); } if (!$("#hline").attr("id")) { var hLine = "<div id='hline' style='overflow:hidden;background-color:"+this.config["bar_color"]+";height:1px;width:100%;position:absolute;left:0px;top:" + (_point.y ) + "px;'/>"; $(hLine).appendTo("body"); } else { $("#hline").css("top",(_point.y ) + "px"); hLine.show(); } } this.hideFocus(); return true; }, hideFocus:function() {//隐藏焦点效果 if (paper != null) { var circle = paper.circle(25, 25, 30); circle.attr("stroke", this.config["circle_color"]); circle.attr("stroke-width", 1); var anim = Raphael.animation({ r: 5 }, 900, null, function(){ this.locationTimer = setTimeout(function(){ $("#canvas").hide(); //焦点 $("#vline").hide(); //横条 $("#hline").hide(); //竖条 clearTimeout(this.locationTimer); }, 500); }); circle.animate(anim); } else { this.locationTimer = setTimeout(function(){ $("#canvas").hide(); //焦点 $("#vline").hide(); //横条 $("#hline").hide(); //竖条 clearTimeout(this.locationTimer); }, 500); } },mousePosition:function (e) { var x,y; var e = e||window.event; return { x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft, y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop } },elementPosition:function( oElement ) { var x2 = 0; var y2 = 0; var width = oElement.offsetWidth; var height = oElement.offsetHeight; var postion = ""; if( typeof( oElement.offsetParent ) != 'undefined' ){ for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent ) { posX += oElement.offsetLeft; posY += oElement.offsetTop; } x2 = posX + width; y2 = posY + height; postion = [ posX, posY ,x2, y2]; } else{ x2 = oElement.x + width; y2 = oElement.y + height; postion = [ oElement.x, oElement.y, x2, y2]; } var x = postion[0] + ((postion[2] - postion[0])/2); var y = postion[1] + ((postion[3] - postion[1])/2); return {"x":x,"y":y}; } } html页面调用源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/graphics.js"></script> <script type="text/javascript" src="js/qfocus.js"></script> <title>qfocus</title> <script type="text/javascript"> function forward(ev){ qfocus.onmouseClick(ev); } document.onmousedown=forward; </script> </head> <body> </body> </html> 效果图片:

JQuery有很多这样的插件,但是我们公司不用jquery,没有插件,所以我就试着自己写,我也不知道别人是怎么写的,纯粹是按着自己的想法来的。 直接上代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> window.onload = function(){ var btn = document.getElementsByTagName('button')[0]; var flt = document.getElementsByTagName('div')[0]; btn.onclick = function(){ event.cancelBubble = true; var x = btn.offsetLeft - 15 + 'px'; var y = btn.offsetTop - 100 + 'px'; flt.style.top = y; flt.style.left = x; flt.style.display = 'block'; } document.onclick = function(){ flt.style.display = 'none'; } } </script> <style type="text/css"> *{ margin: 0px; padding: 0px; } div{ width: 60px; height: 100px; background: #33ccff; display: none; position: absolute; } div ul{ text-align: center; } div li{ list-style-type: none; } button{ top: 300px; left: 400px; position: absolute; } </style> </head> <body> <button id="btn">Click</button> <div> <ul id="nav"> <li class="item1"><a href="">Demo 1</a></li> <li class="item2"><a href="">Demo 2</a></li> <li class="item3"><a href="">Demo 3</a></li> <li class="item4"><a href="">Demo 4</a></li> <li class="item5"><a href="">Demo 5</a></li> </ul> </div> </body> </html> 复制到本地就可以测试了。 这里要说一下cancelBubble这两个东西。因为我做的效果是点击按钮就显示div,点击页面的任意位置div就消失,但javascript的冒泡机制是button获得一个onclick事件后,往上冒泡,dom在获得一个onclick事件,这样的话就和让div消失的onclick事件冲突了,所以需要event.cancelBubble = true;这行代码来停止冒泡。大体就是这样,代码很简单。