當前位置：
首頁 >
自定义动画 animate || 案例：王者荣耀手风琴效果分析
發布時間：2025/4/16
58
豆豆
生活随笔
收集整理的這篇文章主要介紹了
自定义动画 animate || 案例：王者荣耀手风琴效果分析
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自定義動畫 animate
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {position: absolute;width: 200px;height: 200px;background-color: pink;}</style> </head><body><button>動起來</button><div></div><script>$(function() {$("button").click(function() {$("div").animate({left: 500,top: 300,opacity: .4,width: 500}, 500);})})</script> </body></html>案例：王者榮耀手風琴效果分析
<!doctype html> <html><head><meta charset="utf-8"><title>手風琴案例</title><style type="text/css">* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style></head><body><script src="js/jquery.min.js"></script><script type="text/javascript">$(function() {// 鼠標經過某個小li 有兩步操作：$(".king li").mouseenter(function() {// 1.當前小li 寬度變為 224px， 同時里面的小圖片淡出，大圖片淡入$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li寬度變為69px， 小圖片淡入， 大圖片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})});</script><div class="king"><ul><li class="current"><a href="#"><img src="images/m1.jpg" alt="" class="small"><img src="images/m.png" alt="" class="big"></a></li><li><a href="#"><img src="images/l1.jpg" alt="" class="small"><img src="images/l.png" alt="" class="big"></a></li><li><a href="#"><img src="images/c1.jpg" alt="" class="small"><img src="images/c.png" alt="" class="big"></a></li><li><a href="#"><img src="images/w1.jpg" alt="" class="small"><img src="images/w.png" alt="" class="big"></a></li><li><a href="#"><img src="images/z1.jpg" alt="" class="small"><img src="images/z.png" alt="" class="big"></a></li><li><a href="#"><img src="images/h1.jpg" alt="" class="small"><img src="images/h.png" alt="" class="big"></a></li><li><a href="#"><img src="images/t1.jpg" alt="" class="small"><img src="images/t.png" alt="" class="big"></a></li></ul></div></body></html>總結
以上是生活随笔為你收集整理的自定义动画 animate || 案例：王者荣耀手风琴效果分析的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 淡入淡出效果 || 高亮显示案例
- 下一篇： jQuery 内容文本值|| 案例：购物