广州凡科互联网科技有限公司

营业时间
MON-SAT 9:00-18:00

全国服务热线
18720358503

公司门店地址
广州市海珠区工业大道北67号凤凰创意园

微信小程序制作_jQuery完成的鼠标拖动画矩形框示

日期:2021-01-07 浏览:
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】       这篇文章主要介绍了jQuery实现的鼠标拖动画矩形框,结合实例形式分析了jQuery基于事件响应及页面元素属性动态操作实现的图形绘制相关操作技巧,需要的朋友可以参考下
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "TR/xhtml1/DTD/xhtml1-strict.dtd" html xmlns="1999/xhtml" xml:lang="zh" lang="zh" head title 鼠标拖动画矩形 /title meta http-equiv="content-type" content="text/html;charset=utf-8" script src="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: ; 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 div div id="confirmingAppraisal" img src="1.jpg" /div /div /body /html

感兴趣的朋友可以使用如下工具测试上述代码运行效果:

在线HTML/CSS/JavaScript代码运行工具:

在线HTML/CSS/JavaScript前端代码调试运行工具:

更多关于jQuery相关内容还可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《》

希望本文所述对大家jQuery程序设计有所帮助。




新闻资讯

联系方式丨CONTACT

  • 全国热线:18720358503
  • 传真热线:18720358503
  • Q Q咨询:2639601583
  • 企业邮箱:2639601583@qq.com

首页
电话
短信
联系