javascript动画效果打开/关闭层- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript动画效果打开/关闭层

Javascript: 不是原型继承那么简单！！prototype的深度探索; JavaScript与函数式编程解释; 转一个日期输入控件，支持FF; 用 JSON 处理缓存; 改版了网上的一个js操作userdata; 仿服务器端脚本方式的JS模板实现方法; javascript函数库-集合框架; Javascript模板技术; javascript实现的listview效果; JavaScript 实现網頁打印處理; （推荐一个超好的JS函数库）S.Sams Lifexperience ScriptClassLib; 实现div可编辑的常见方法总结; js奇偶数判断的代码; 可以支持多中格式的JS键盘; javascript静态的url如何传递; JS实多级联动下拉菜单类，简单实现省市区联动菜单！; Packer 3.0 JS压缩及混淆工具下载; 学习jquery必备 api中英文对照的chm手册下载; 用js实现CSS圆角生成更新; 用js实现的抽象CSS圆角效果!!

No. « ‹ 64 65 66 67 › »

技术文章搜索

关键字

Javascript 中的 javascript动画效果打开/关闭层

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 329 ::

收藏到网摘: n/a

javascript编程必备_JS语法字典 javascript键盘事件全面控制脚本代码

用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="Content-Type" content="text/html; charset=gb2312" />
<title>js_打开层关闭层效果_软晨学习网</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>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

javascript编程必备_JS语法字典 javascript键盘事件全面控制脚本代码

Javascript 中的 javascript动画效果打开/关闭层

评论 (0) All