JS---案例:开机动画
程序员文章站
2023-03-26 20:59:43
案例:开机动画 由上下两部分组成,先下面的高变为0 ,再最大的div宽为0,形成一个缩小到没有的动画效果 点击的X是在背景图上的,在上面设置了一个空的span用于注册点击事件 ......
案例:开机动画
由上下两部分组成,先下面的高变为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>
上一篇: golang的io.copy使用
下一篇: GetWindowLong() 函数
推荐阅读
-
iOS动画案例(1) 类似于qq账号信息里的一个动画效果
-
Three.js的基础动画实现案例
-
Android9.0 MTK 平板横屏方案修改(强制app横屏 + 开机logo/动画+关机充电横屏 + RecoveryUI 横屏)
-
Vuejs第七篇之Vuejs过渡动画案例全面解析
-
android开机自启动原理与实现案例(附源码)
-
JS---案例:旋转木马
-
JS---封装缓动(变速)动画函数---增加任意一个属性
-
JS---封装缓动(变速)动画函数---增加多个任意多个属性
-
JS---封装缓动(变速)动画函数---增加任意多个属性&增加回调函数
-
Andorid 系统实现多种开机动画和logo切换功能