JS实现可展开折叠层的鼠标拖曳效果_javascript技巧

本文实例讲述了JS实现可展开折叠层的鼠标拖曳效果。分享给大家供大家参考。具体如下:

这是一款简单JS代码实现的鼠标拖曳图层效果,比较精简,大家参考一下。鼠标点击层标题栏可实现层内容的展开与折叠,按住标题栏可实现层的拖动。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-fade-out-mouse-draw-style-demo/

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>鼠标拖曳</title>
 </head>
 <body>
 <script type="text/javascript">
 function drag(elementToDrag,event){
  var startX=event.clientX,startY=event.clientY;
  var origX=elementToDrag.offsetLeft,origY=elementToDrag.offsetTop;
  var deltaX=startX-origX,deltaY=startY-origY;
  if(document.addEventListener){
    document.addEventListener("mousemove",moveHandler,true);
  document.addEventListener("mouseup",upHandler,true);
 }
 else{
  elementToDrag.setCapture();
  elementToDrag.attachEvent("onmousemove",moveHandler);
  elementToDrag.attachEvent("onmouseup",upHandler);
  elementToDrag.attachEvent("onlosecapture",upHandler);
 }
 if(event.stopPropagation) event.stopPropagation();
 else event.cancelBubble=true;
 if(event.preventDefault) event.preventDefault();
 else event.returnValue=false;
 function moveHandler(e){
  if(!e) e=window.event;
  elementToDrag.style.left=(e.clientX-deltaX)+"px";
  elementToDrag.style.top=(e.clientY-deltaY)+"px";
  elementToDrag.style.zIndex="10";
  elementToDrag.getElementsByTagName("p")[0].innerHTML="clientX:"+e.clientX+"</br>"+"clientY:"+e.clientY+"</br>"+"offsetLeft:"+origX+"</br>"+"offsetTop:"+origY+"</br>"+"clientX-offsetLeft:"+deltaX+"</br>"+"clientY-offsetTop:"+deltaY+"</br>";
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble = true;
 }
 function upHandler(e){
  if(!e) e=window.event;
   elementToDrag.style.zIndex="1";
  if(document.removeEventListener){
   document.removeEventListener("mouseup",upHandler,true);
  document.removeEventListener("mousemove",moveHandler,true);
  }
  else{
   elementToDrag.detachEvent("onlosecapture",upHandler);
  elementToDrag.detachEvent("onmouseup",upHandler);
  elementToDrag.detachEvent("onmousemove",moveHandler);
  elementToDrag.releaseCapture();
  }
  if(e.stopPropagation) e.stopPropagation();
  else e.cancelBubble=true;
 }
 }
 </script>
 <div style="position:absolute;left:100px;top:100px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me1</div>
 <p>test</p>
 </div>
  <div style="position:absolute;left:100px;top:200px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me2</div>
 <p>test</p>
 </div>
  <div style="position:absolute;left:100px;top:300px;width:250px;background-color:#789;border:1px solid #f00">
  <div style="background:#ccc;border-bottom:dotted black;padding:3px;font-weight:bold" onmousedown="drag(this.parentNode,event)">Drag Me3</div>
 <p>test</p>
 </div>
 </body>
</html>

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索js
, 展开折叠层
鼠标拖曳
javascript 展开 收起、javascript 点击展开、excel展开折叠、div折叠展开、html展开折叠菜单,以便于您获取更多的相关知识。

时间: 2024-11-05 20:44:17

JS实现可展开折叠层的鼠标拖曳效果_javascript技巧的相关文章

JS实现网页Div层Clone拖拽效果_javascript技巧

本文实例讲述了JS实现网页Div层Clone拖拽效果.分享给大家供大家参考.具体如下: 这是一个层拖动,网页上的拖拽Clone效果实例,两个层可在鼠标的拖动下,任意改变位置,智能判断层级,也就是智能判断自身是否处于最高层,最高处的层是不会被其它层遮挡的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-draw-box-clone-style-codes/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

JS实现超简单的鼠标拖动效果_javascript技巧

本文实例讲述了JS实现超简单的鼠标拖动效果.分享给大家供大家参考,具体如下: 这里使用尽可能短的JavaScript代码写一个JS拖动,函数本身287个字符...如果不是考虑兼容性和变量封装,还可以更短点. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-s-drug-demo/ 具体代码如下: <title>尽可能短的写一个JS拖动</title> <body> <div id="demo&quo

js实现iGoogleDivDrag模块拖动层拖动特效的方法_javascript技巧

本文实例讲述了js实现iGoogleDivDrag模块拖动层拖动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or

JS实现定时自动关闭DIV层提示框的方法_javascript技巧

本文实例讲述了JS实现定时自动关闭DIV层提示框的方法.分享给大家供大家参考.具体分析如下: 这里用JS设定时间去控制指定ID的DIV层是否显示,可以实现一个自动关闭的提示框,时间一到,马上关闭,这样会使你的网页更人性一点,代码其实比你想像的还要简单,就一行代码. <title>自动关闭的DIV层</title> <body onLoad=setTimeout("abc.style.display='none'",5000)> <div id=

jQuery实现div浮动层跟随页面滚动效果_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

JS实现自动定时切换的简洁网页选项卡效果_javascript技巧

本文实例讲述了JS实现自动定时切换的简洁网页选项卡效果.分享给大家供大家参考.具体如下: 这是一款简洁人网页选项卡,与其它TAB不同的是,本选项卡是自动切换的,在变量里设定选项卡的内容.切换时间等,它就开始工作了,如果可以响应鼠标的动作就更完美了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/ 具体代码如下: <html> <head> <title>自动切换的选项卡

JS+CSS实现经典的左侧竖向滑动菜单效果_javascript技巧

本文实例讲述了JS+CSS实现经典的左侧竖向滑动菜单效果.分享给大家供大家参考.具体如下: 这是一款经过改造的左侧竖向滑动菜单,基于JavaScript+CSS,没有过多的修饰,主要想实现菜单的动画效果,想用的朋友,自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-left-v-hd-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

JS特效实现图片自动播放并可控的效果_javascript技巧

不多说了,实现方法请看下面代码. 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8"/> <title>JS代码实现图片自动播放并可控的效果</title><base target="_blank" /> <link re

js实现带圆角的多级下拉菜单效果_javascript技巧

本文实例讲述了js实现带圆角的多级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款酷黑的圆角多级下滑菜单,可支持三级,鼠标放上后可见到滑出的菜单,调用了一个JS封装库,代码有些复杂,有兴趣的可研究. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-down-show-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transition