可以通过按钮来控制窗口的显示与隐藏效果，挺实用的一个窗口特效，根据自己的需求来自定义窗口内容即可。
<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现按钮控制窗口显示与隐藏效果_武鸣人</title>
<style type="text/css">
#www_wuming_ren{width:500px;height:500px;border:1px solid red;}
#wuming_ren{border:1px solid red;display:none;width:10px;height:10px;background:#9900FF;}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<input type="button" value="打开" id="www_wuming_ren_1">
<input type="button" value="关闭" id="www_wuming_ren_2">
<div id="www_wuming_ren">
<div id="wuming_ren"><a href="https://www.wuming.ren">武鸣人</a>，各种信息免费发布！</div>
</div>
<script type="text/javascript">
function $ (o) {
return document.getElementById(o);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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];
}
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
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)
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function XopenDiv(o){
o.style.display="block";
XslideDown(o,"width",400,10);
XslideDown(o,"height",400,10);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
function XcloseDiv(o){
XslideUp(o,"width",10,10);
XslideUp(o,"height",10,10);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$("www_wuming_ren_1").onclick=function(){
XopenDiv($("wuming_ren"))
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
$("www_wuming_ren_2").onclick=function(){
XcloseDiv($("wuming_ren"))
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处