jQuery游戏图片手风琴收缩切换特效资源-CSDN文库

共12个文件

png：10个

js：1个

html：1个

jquery

需积分: 1 137 浏览量 2023-11-05 20:34:08 上传评论收藏 381KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery游戏图片手风琴收缩切换特效.zip （12个子文件）

jquery.min.js 91KB

index.html 2KB

images

05.png 8KB

02.png 6KB

feature-5.png 64KB

04.png 7KB

01.png 9KB

03.png 8KB

feature-1.png 66KB

feature-4.png 61KB

feature-3.png 59KB

feature-2.png 58KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery游戏图片手风琴收缩切换特效</title> <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } body{background-color: #171717} .box { width: 1168px; height: 519px; background: red; margin: 50px auto; } .item { width: 119px; height: 519px; float: left; } .item:nth-child(1) { background: url("images/feature-1.png") no-repeat 100% 100%; /*background-size: 100% 100%; 背景图尺寸 */ } .item:nth-child(2) { background: url("images/feature-2.png") no-repeat 100% 100%; } .item:nth-child(3) { background: url("images/feature-3.png") no-repeat 100% 100%; } .item:nth-child(4) { background: url("images/feature-4.png") no-repeat 100% 100%; } .item:nth-child(5) { background: url("images/feature-5.png") no-repeat 100% 100%; } .big { width: 692px; } .big img { display: none; height: 519px; } </style> <script type="text/javascript"> $(function () { $(".item").mouseenter(function () { $(this).addClass("big").siblings().removeClass("big"); }); }); </script> </head> <body> <div class="box"> <div class="item big"><img src="images/01.png" alt=""></div> <div class="item"><img src="images/02.png" alt=""></div> <div class="item"><img src="images/03.png" alt=""></div> <div class="item"><img src="images/04.png" alt=""></div> <div class="item"><img src="images/05.png" alt=""></div> </div> </body> </html>

评论收藏

内容反馈