本文實例講述了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.VeVB.COm/code/HtmlJsRun
在線HTML/CSS/JavaScript前端代碼調試運行工具：
http://tools.VeVB.COm/code/WebCodeRun
更多關于jQuery相關內容還可查看本站專題：《jQuery動畫與特效用法總結》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
