jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
程序员文章站
2023-08-16 09:36:27
本文实例讲述了jquery实现的鼠标拖动画矩形框。分享给大家供大家参考,具体如下:
本文实例讲述了jquery实现的鼠标拖动画矩形框。分享给大家供大家参考,具体如下:
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh"> <head> <title>鼠标拖动画矩形</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0} html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical} #confirmingappraisal { position: relative; left: 0; top: 0; margin: 0 auto; padding: 0; width: 800px; min-height: 800px; overflow: auto; height: 1000px; background-color: #e9e9e9; } .dashed-box {position: absolute;z-index: 9997; border: 1px dashed red; width: 0px; height: 0px;left: 0px; top: 0px; overflow: hidden;} #moving_box {background-color: #0a90db;} .question-box { position: absolute; z-index: 9998; /*background: red;*/ /* older safari/chrome browsers */ -webkit-opacity: 0.8; /* netscape and older than firefox 0.9 */ -moz-opacity: 0.8; /* safari 1.x (pre webkit!) 老式khtml内核的safari浏览器*/ -khtml-opacity: 0.8; /* ie9 + etc...modern browsers */ opacity: .8; /* ie 4-9 */ filter: alpha(opacity=80); /*this works in ie 8 & 9 too*/ -ms-filter: "progid:dximagetransform.microsoft.alpha(opacity=80)"; /*ie4-ie9*/ filter: progid:dximagetransform.microsoft.alpha(opacity=80); } .question-border {z-index: 9999;border: 2px dashed red;overflow: hidden; } .del-box { width: 17px; height: 17px; float: right; position: relative; margin-top: 1px; margin-right: 1px; z-index: 99999999999; background: url(del.png); } </style> <script language="javascript"> window.onload = function() { function stopdefault(e) { if(e && e.preventdefault) e.preventdefault(); else window.event.returnvalue = false; return false; } function obox() { var wid = "w"; var index = 0; var target = null; var startx = 0, starty = 0; var flag = false; var startl = 0, startt = 0, boxheight = 0, boxwidth = 0; var boxobj = document.getelementbyid("confirmingappraisal"); var frame = $("#confirmingappraisal"); var referencesize = { "pos": frame.offset(), "width": frame.outerwidth(), "height": frame.outerheight() } var newmarkpos = { "left": startl,////按下时鼠标距离的左边的距离 "top": startt////按下时鼠标距离的上边的距离 } //鼠标点击 boxobj.onmousedown = function(e) { flag = true; var e = window.event || e; target = e.target || e.srcelement; //获取document 对象的引用 //e.pagey,e.pagex兼容 if(target.src) { stopdefault(e) } var scrolltop = boxobj.scrolltop; var scrollleft = boxobj.scrollleft; var epagex = e.clientx + scrollleft; var epagey = e.clienty + scrolltop; //按下时鼠标距离页面的距离 startx = epagex; starty = epagey; //按下时鼠标距离的左边和上边的距离 startl = startx - referencesize.pos.left; startt = starty - referencesize.pos.top; index++; // 如果鼠标在 box 上被按下 if(target.classname.match(/del-box/i)) { // 允许拖动 flag = false; // 设置当前 box 的 id 为 moving_box var movingbox = document.getelementbyid("moving_box") if(movingbox !== null) { movingbox.removeattribute("id"); } target.id = "moving_box"; removebox(target); } else { var div = document.createelement("div"); div.id = wid + index; div.classname = "dashed-box"; boxobj.appendchild(div); div = null; } } //鼠标离开 boxobj.onmouseup = function(e) { var e = window.event || e; if(boxwidth >= 1 || boxheight >= 1) { boxobj.removechild(dragbox(wid + index)); index++; var div = document.createelement("div"); var spanobj = document.createelement("span"); spanobj.classname = 'del-box'; div.appendchild(spanobj); div.classname = "question-box question-border"; div.style.left = newmarkpos.left + "px"; div.style.top = newmarkpos.top + "px"; div.style.width = boxwidth + "px"; div.style.height = boxheight + "px"; boxobj.appendchild(div); div = null; boxwidth = 0; boxheight = 0; } else { if(flag) { boxobj.removechild(dragbox(wid + index)); } } flag = false; } //鼠标移动 boxobj.onmousemove = function(e) { var e = window.event || e; stopdefault(e) if(flag) { var scrolltop = boxobj.scrolltop; var scrollleft = boxobj.scrollleft; var epx = e.clientx + scrollleft; var epy = e.clienty + scrolltop; var disw = epx - startx; var dish = epy - starty; var l = startl + disw; var t = startt + dish; if(disw > 0) { if(l >= 0) { boxwidth = disw } newmarkpos.left = startl; } else { if(l <= 0) { l = 0; boxwidth = startl; } boxwidth = (startl - l); newmarkpos.left = l; } if(dish > 0) { if(t >= 0) { boxheight = dish } newmarkpos.top = startt; } else { if(t <= 0) { t = 0; boxheight = startt; } boxheight = (startt - t) newmarkpos.top = t; } dragbox(wid + index).style.left = newmarkpos.left + "px"; dragbox(wid + index).style.top = newmarkpos.top + "px"; dragbox(wid + index).style.width = math.abs(boxwidth) + "px"; dragbox(wid + index).style.height = math.abs(boxheight) + "px"; stopdefault(e) } } var dragbox = function(id) { return document.getelementbyid(id); } }; obox(); function removebox(obj) { if(obj) { var confirmingappraisal = document.getelementbyid('confirmingappraisal'); if(obj.classname == 'del-box') { var objid = document.getelementbyid(obj.id); confirmingappraisal.removechild(objid.parentnode); } else { alert(123) } } }; } </script> </head> <body style="overflow: hidden"> <div class="confirming-appraisal"> <div id="confirmingappraisal"> <img src="1.jpg" style="position: absolute;width: 1000px;height: 1600px;"> </div> </div> </body> </html>
感兴趣的朋友可以使用如下工具测试上述代码运行效果:
在线html/css/javascript代码运行工具:
http://tools.jb51.net/code/htmljsrun
在线html/css/javascript前端代码调试运行工具:
http://tools.jb51.net/code/webcoderun
更多关于jquery相关内容还可查看本站专题:《jquery动画与特效用法总结》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery拖拽特效与技巧总结》、《jquery表格(table)操作技巧汇总》、《jquery常见经典特效汇总》及《jquery选择器用法总结》
希望本文所述对大家jquery程序设计有所帮助。
上一篇: 库克: 关于苹果汽车我还是给你们留点惊喜