<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>弹出层事例</title>
<style>
div{padding:0;margin:0;}
.wra{margin:0 auto;width:1000px;overflow:hidden;}
.menu{border:1px solid #ccc;background:#000;color:#fff;width:250px;height:30px;font:14px/30px '微软雅黑';text-align:center;text-shadow:1px 1px 2px #f5f5f5;cursor:pointer;}
.con{border:1px solid #000;background:#fff;padding:30px;width:500px;height:200px;position:fixed;top:-150%;left:50%;margin:-100px 0 0 -250px;display:none;z-index:999;}
.close{display:block;position:absolute;right:10px;top:10px;cursor:pointer;font:bold 14px Arial;-moz-transition:-moz-transform .5s ease-in 0s;}
.close:hover{-moz-transform:rotate(360deg);}
</style>
<style>
</style>
</head>
<body>
<div>
<div>点击弹出层</div>
<div>
<span title="关闭">X</span>
弹出层内容
</div>
<script src="https://www.jb51.net/popup.js"></script>
<script src="https://www.jb51.net/animation.source.js"></script>
<script>
var D = document,m = D.getElementById("J_popup"),con = D.getElementById("J_popup_con"),cl = D.getElementById("J_colse");
new Popup(m,con,cl,{addFun:function(){new ani("J_popup_con",{sty:"top",maxVal:"350",effect:2})},callBack:function(){con.style.display="block";new ani("J_popup_con",{sty:"top",maxVal:"0"})}})
</script>
</div>
</body>
</html>
基于OO的动画附加插件,可以实现弹跳、渐隐等动(3)
内容版权声明：除非注明，否则皆为本站原创文章。