由上下两部分组成,先下面的高变为0 ,再最大的div宽为0,形成一个缩小到没有的动画效果
点击的x是在背景图上的,在上面设置了一个空的span用于注册点击事件
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> <style> .box { width: 322px; position: fixed; bottom: 0; right: 0; overflow: hidden; } span { position: absolute; top: 0; right: 0; width: 30px; height: 20px; cursor: pointer; } </style> </head> <body> <div class="box" id="box"> <span id="closebutton"></span> <div class="hd" id="headpart"> <img src="images/t.jpg" alt="" /> </div> <div class="bd" id="bottompart"> <img src="images/b.jpg" alt="" /> </div> </div> <script src="common.js"></script> <script> my$("closebutton").onclick = function () { //设置最下面的div高渐渐变为0,里面加个回掉函数 animate(my$("bottompart"), { "height": 0 }, function () { animate(my$("box"), { "width": 0 }); }); }; </script> </body> </html>
如对本文有疑问, 点击进行留言回复!!
Parallels Desktop v15.1.4-47270 商业版下载 Mac安装Windows首选虚拟机
关于LPC824Lite开发板下载程序时提示"Invalid ROM Table"
MySQL 5.7 关于 JSON 类型的子集Key/Value获取方法分享
javascript从入门到跑路-----小文的js学习笔记(19)------- js的垃圾回收机制
网友评论