12.手風琴效果
阿新 • • 發佈：2018-10-03
div use idt script ima 3.3 分享圖片 class add
效果圖：
源碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.3.1.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } img{ display: block; } .box{ margin: 100px auto; width: 1060px; height: 250px; position: relative; } .box li{ width: 210px; height: 250px; float: left; } </style> <script> $(function () { //可以用each(function(i,ele){})方法循環遍歷 $(".box li").each(function (i,ele) { $(ele).css("background","url(images/0"+(i+1)+".jpg)") }).mouseenter(function () { $(this).stop().animate({width:650},500).siblings("li").stop().animate({width:100},500); }).mouseleave(function () { $(".box li").stop().animate({width:210},500); }) }) </script> </head> <body> <div class="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
圖片跟上一文章一樣
12.手風琴效果