2020-10-21

it2023-12-31 61

手风琴效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; width: 1300px; } #box { width: 1200px; height: 400px; border: 2px solid red; margin: 100px auto; } #box li { width: 240px; height: 400px; /*border: 1px solid #000;*/ float: left; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="../day29/jquery-2.2.4.js"></script> <script> //1.获取节点，设置背景图片 $('ul li').each(function(k,v){ //v 是Dom对象需要转化jq $(v).css('background', 'url(images/' + (k - 0 + 1) + '.jpg)'); }) $('li').eq(0).css('background','url(images/1.jpg)') //2.给li绑定鼠标移入 $('li').mouseenter(function(){ //当前图片宽度800，兄弟是100 $(this).animate({ width: 800 }).siblings().animate({ width: 100 }) }) // 3.鼠标恢复240 $('#box').mouseleave(function(){ $('ul li').animate({width:240}) }) </script> </body> </html>

最新回复(0)