DIV层之拖动、关闭、打开效果代码

更新时间：2008年09月07日 23:19:18 作者：

非常不错的效果，适合在当前页打开测试窗口，图片等

<!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="Content-Type" content="text/html; charset=gb2312" /> <title>div托动，打开，关闭效果</title> <style type="text/css"> body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;} #bodyL{ float:left; width:84px; margin-right:2px; } a.od{ width:80px; height:25px; line-height:25px; text-align:center; font-weight:bold; border: 2px solid #849BCA; display:block; color:#547BC9; float:left; text-decoration:none; margin-top:2px; } a.od:link{ background:#EEF1F8; } a.od:visited{ background:#EEF1F8; } a.od:hover{ background:#EEE; } a.od:active{ background:#EEE; } #fd{ width:500px; height:200px; background:#EDF1F8; border: 2px solid #849BCA; margin-top:2px; margin-left:2px; float:left; overflow:hidden; position:absolute; left:0px; top:0px; cursor:move; float:left; /*filter:alpha(opacity=50);*/ } .content{ padding:10px; } </style> </head> <body> <div id="bodyL"> <a href="#" class="od" onclick = "show('fd');return false;"> [打开层] </a> <a href="#" class="od" onclick = "closeed('fd');return false;"> [关闭层] </a> </div> <div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;"> <div class="content">移动层</div> </div> <script type="text/javascript"> var prox; var proy; var proxc; var proyc; function show(id){/*--打开--*/ clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); o.style.display = "block"; o.style.width = "1px"; o.style.height = "1px"; prox = setInterval(function(){openx(o,500)},10); } function openx(o,x){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx < x) { o.style.width = (cx + Math.ceil((x-cx)/5)) +"px"; } else { clearInterval(prox); proy = setInterval(function(){openy(o,200)},10); } } function openy(o,y){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy < y) { o.style.height = (cy + Math.ceil((y-cy)/5)) +"px"; } else { clearInterval(proy); } } function closeed(id){/*--关闭--*/ clearInterval(prox); clearInterval(proy); clearInterval(proxc); clearInterval(proyc); var o = document.getElementById(id); if(o.style.display == "block") { proyc = setInterval(function(){closey(o)},10); } } function closey(o){/*--打开y--*/ var cy = parseInt(o.style.height); if(cy > 0) { o.style.height = (cy - Math.ceil(cy/5)) +"px"; } else { clearInterval(proyc); proxc = setInterval(function(){closex(o)},10); } } function closex(o){/*--打开x--*/ var cx = parseInt(o.style.width); if(cx > 0) { o.style.width = (cx - Math.ceil(cx/5)) +"px"; } else { clearInterval(proxc); o.style.display = "none"; } } /*-------------------------鼠标拖动---------------------*/ var od = document.getElementById("fd"); var dx,dy,mx,my,mouseD; var odrag; var isIE = document.all ? true : false; document.onmousedown = function(e){ var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mouseD = true; } } document.onmouseup = function(){ mouseD = false; odrag = ""; if(isIE) { od.releaseCapture(); od.filters.alpha.opacity = 100; } else { window.releaseEvents(od.MOUSEMOVE); od.style.opacity = 1; } } //function readyMove(e){ od.onmousedown = function(e){ odrag = this; var e = e ? e : event; if(e.button == (document.all ? 1 : 0)) { mx = e.clientX; my = e.clientY; od.style.left = od.offsetLeft + "px"; od.style.top = od.offsetTop + "px"; if(isIE) { od.setCapture(); od.filters.alpha.opacity = 50; } else { window.captureEvents(Event.MOUSEMOVE); od.style.opacity = 0.5; } //alert(mx); //alert(my); } } document.onmousemove = function(e){ var e = e ? e : event; //alert(mrx); //alert(e.button); if(mouseD==true && odrag) { var mrx = e.clientX - mx; var mry = e.clientY - my; od.style.left = parseInt(od.style.left) +mrx + "px"; od.style.top = parseInt(od.style.top) + mry + "px"; mx = e.clientX; my = e.clientY; } } </script> <<a href="https://www.jb51.net">脚本之家</a> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

JavaScript模板引擎EJS特性及用法详解
EJS是一种简单而灵活的模板引擎，用于将数据动态渲染到网页上，本文将从介绍EJS的背景和起源开始，详细介绍EJS的特性和使用方法，包括安装配置、基本语法和标签、数据绑定和逻辑控制、模板的继承和包含等方面，感兴趣的同学跟着小编一起来学习吧
2023-06-06
惊云JS随机排序程序随机显示信息-每次新闻显示顺序都不一样
惊云JS随机排序程序随机显示信息-每次新闻显示顺序都不一样...
2007-11-11
js为什么[]==![]是成立的吗
本文主要介绍了js为什么[]==![]是成立的吗，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-01-01
JavaScript实现图片合成下载的示例
这篇文章主要介绍了JavaScript实现图片合成下载的示例，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-11-11
echarts实现中国地图下钻进入下一级(地图钻取)
最近在学习echarts,今天就来介绍一下echarts实现中国地图下钻进入下一级,具有一定的参考价值,感兴趣的可以了解一下
2023-08-08
JS实现滑动插件
这篇文章主要为大家详细介绍了JS实现滑动插件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
JavaScript中判断网络状态的几种方法
这篇文章主要介绍了如何使用JavaScript的`navigator.onLine`属性和`ononline`、`onoffline`事件来检测浏览器的在线状态,并提供了兼容性代码示例,需要的朋友可以参考下
2025-02-02
javascript工厂模式和构造函数模式创建对象方法解析
本文主要对javascript工厂模式和构造函数模式创建对象方法进行解析，具有一定的参考价值，下面跟着小编一起来看下吧
2016-12-12
ejs v9 javascript模板系统
我的模板系统升一下级, 继续在新公司里面用。现在几在互联网公司没有不用javascript模板了，什么TX，百度，新浪， 360什么的，最后瀑布流的流行，里面又有许多用到模板
2012-03-03
js和jquery判断数据类型的4种方法总结
这篇文章主要给大家介绍了关于js和jquery判断数据类型的4种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08

DIV层之拖动、关闭、打开效果代码

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具