JS动画效果打开、关闭层的实现方法

前端技术 2023/09/02 JavaScript

本文实例讲述了JS动画效果打开、关闭层的实现方法。分享给大家供大家参考。具体如下：

<!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=utf-8\" />
<title>层展开、关闭</title>
<style type=\"text/css\">
#main{
width:500px; margin:100px;
height:500px;border:1px solid red
}
#test{
border:1px solid red;
display:none;width:10px;
height:10px; background:yellow
}
</style>
</head>
<body>
<input type=\"button\" value=\"打开\" id=\"bt\" />
<input type=\"button\" value=\"关闭\" id=\"bt1\" />
<div id=\"main\"><div id=\"test\"></div>
</div>
</body>
</html>
<script type=\"text/javascript\">
function $ (o) {
return document.getElementById(o);
}
function XslideDown(obj,type,mX,num) {
if(!type){return;}
try{
var type1=type==\"height\"?\"marginTop\":\"marginLeft\";
var type2=type==\"height\"?\"top\":\"left\";
XSetCss(obj,[type1,XgetOffset(obj)[type2]+\"px\"]);
XSetCss(obj,[type,XgetOffset(obj)[type]+num+\"px\"]);
if(XgetOffset(obj)[type]<mX){
setTimeout(function(){XslideDown(obj,type,mX,num);},10); 
}
else{
XSetCss(obj,[type,mX])
}
}
catch(e){}
}
function XslideUp(obj,type,mX,num) {
if(!type){return;}
try{
var type1=type==\"height\"?\"marginTop\":\"marginLeft\";
var type2=type==\"height\"?\"top\":\"left\";
XSetCss(obj,[type1,XgetOffset(obj)[type2]+\"px\"]);
XSetCss(obj,[type,XgetOffset(obj)[type]-num+\"px\"]);
if(XgetOffset(obj)[type]>mX){ 
setTimeout(function(){XslideUp(obj,type,mX,num);},1); 
}
else{
XSetCss(obj,[type,mX])
obj.style.display=\"none\";
}
}
catch(e){}
}
function XSetCss(obj,cssArgs){
if(arguments.length==2)
{ 
if(cssArgs.constructor==Object){
for(var o in cssArgs)
{
if(obj.style[o]!=\"undefiend\")
{
obj.style[o]=cssArgs[o]; 
} 
} 
}
if(cssArgs.constructor==Array&&cssArgs.length==2){
obj.style[cssArgs[0]]=cssArgs[1]; 
}
}
}
function XgetOffset (obj) {
return {
height:obj.offsetHeight,
width:obj.offsetWidth,
top:parseInt((obj.parentNode.offsetHeight-obj.offsetHeight)/2),
left:parseInt((obj.parentNode.offsetWidth-obj.offsetWidth)/2)
}
}
function XopenDiv(o){
o.style.display=\"block\";
XslideDown(o,\"width\",400,10);
XslideDown(o,\"height\",400,10);
}
function XcloseDiv(o){
XslideUp(o,\"width\",10,10);
XslideUp(o,\"height\",10,10);
}
$(\"bt\").onclick=function(){
XopenDiv($(\"test\"))
}
$(\"bt1\").onclick=function(){
XcloseDiv($(\"test\"))
}
</script>

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

本文地址：https://www.stayed.cn/item/4142

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案