基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果
前言:前段时间一直都好忙也就好久没有写些东西了,最近手上的事刚好告些段落了,把以前空写的写插件都拿出来分享下吧,希望对大家有些帮助,也希望有高手能帮忙指点下我的写不足和错误,一直以来自己写的东西都是在用,性能方面个人只能尽量靠近问题还很多……真心求指点;
插件简介:执行渐隐等动画效果,可以这个插件为一个附加插件 可以配合前面我发的一个弹出层 等等之类的东西用增加js展示的趣味性,
使用方法:在下面的js代码里面前面写了,大家可以看看直接复制粘贴就可以用了有问题可以联系我</p
JS代码如下 展示方式可以复制下面的HTML查看
<!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 class="wra"><div id="J_popup" class="menu">点击弹出层</div><div id="J_popup_con" class="con"> <span id="J_colse" class="close" title="关闭">X</span> 弹出层内容 </div> <script src="popup.js"></script> <script src="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>