当前位置:首页 > Web开发 > 正文

在上面设置了一个空的span用于注册点击事件 ! DOCTYPE html html head lang ="en" m

2024-03-31 Web开发

标签:

案例:开机动画

由上下两部分构成,先下面的高变为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>

JS---案例:开机动画

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/33279.html