最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JavaScript拖动层Div代码
时间:2017-05-15 编辑:简简单单 来源:一聚教程网
效果图:(灰色区域可拖动)
代码如下:
代码如下 | 复制代码 |
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" /> < title >无标题文档 title > < style type = "text/css" > *{ margin:0; padding:0;} .div{ width:100px; height:100px; position:absolute;left:100px; top:100px; background:#ccc;}
style >
head > < body > < div class = "div" >
div > < script type = "text/javascript" > var div = document.getElementsByTagName('div')[0]; var zIndex = 6; drag(div); div.ondblclick = function() { alert("ok"); }; function drag(oDrag) { var disX = dixY = 0; oDrag.onmousedown = function(event) { var event = event || window.event; disX = event.clientX - this.offsetLeft; disY = event.clientY - this.offsetTop; var oTemp = this.cloneNode(true); document.body.appendChild(oTemp); document.onmousemove = function(event) { var event = event || window.event; var iL = event.clientX - disX; var iT = event.clientY - disY; var maxL = document.documentElement.clientWidth - oDrag.offsetWidth; var maxT = document.documentElement.clientHeight - oDrag.offsetHeight; iL <= 0 && (iL = 0); iT <= 0 && (iT = 0); iL >= maxL && (iL = maxL); iT >= maxT && (iT = maxT); oTemp.style.zIndex = zIndex++; oTemp.style.opacity = "0.5"; oTemp.style.filter = "alpha(opacity=50)"; oTemp.style.left = iL + "px"; oTemp.style.top = iT + "px"; return false; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; oDrag.style.opacity = oTemp.style.opacity; var arr = { left: oTemp.offsetLeft, top: oTemp.offsetTop }; oDrag.style.zIndex = oTemp.style.zIndex; oAnimate(oDrag, arr, 300, function() { document.body.removeChild(oTemp); }); oDrag.releaseCapture && oDrag.releaseCapture() }; this.setCapture && this.setCapture(); return false } } function oAnimate(obj, params, time, handler) { var node = typeof obj == "string" ? $(obj) : obj; var _style = node.currentStyle ? node.currentStyle: window.getComputedStyle(node, null); var handleFlag = true; for (var p in params) { (function() { var n = p; if (n == "left" || n == "top") { var _old = parseInt(_style[n]); var _new = parseInt(params[n]); var _length = 0, _tt = 10; if (!isNaN(_old)) { var count = _old; var length = _old <= _new ? (_new - _old) : (_old - _new); var speed = length / time * _tt; var flag = 0; var anim = setInterval(function() { node.style[n] = count + "px"; count = _old <= _new ? count + speed: count - speed; flag += _tt; if (flag >= time) { node.style[n] = _new + "px"; clearInterval(anim); if (handleFlag) { handler(); handleFlag = false; } } }, _tt); } } })(); } }
script >
body >
html > |
-
上一个: map的介绍以及C++中map如何操作
-
下一个: js实现带三角符的手风琴效果
相关文章
- 无线网连接提示没有有效的IP配置解决方法 03-08
- javascript实现下雨效果 07-28
- javascript实现圣旨卷轴展开效果(代码分享) 07-20
- JavaScript实现星星等级评价功能 07-14
- javascript实现滑动解锁功能 07-14
- 十大热门的JavaScript框架和库 07-13