标签：图片 lis query idt 鼠标 css tle doctype style
案例分析：
每张图片的宽度是1200，初始5张图片平均放在1200宽的 box 里面，每张图片所占宽度是240
当鼠标移动到某张图片上方时，该图片宽度变成800，其余图片宽度平均每张100
当鼠标离开 box 时，就恢复到初始状态，所有图片平均每张宽度240
关键代码：
$li.mouseenter(function(){ $(this).stop().animate({width : 800}).siblings().stop().animate({width : 100}); }) $li.mouseleave(function()){ $li.stop().animate({width:240}); })
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</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="../jquery-1.12.4.js"></script> <script> $(function () { var $li = $("#box li"); for (var i = 0; i < $li.length; i++) { $li.eq(i).css("backgroundImage", "url(images/" + (i + 1) + ".jpg)"); } //给所有的li注册鼠标经过事件 $li.mouseenter(function () { $(this).stop().animate({width:800}).siblings().stop().animate({width:100}); }).mouseleave(function () { $li.stop().animate({width:240}); }); }); </script> </body> </html>
标签：图片 lis query idt 鼠标 css tle doctype style
原文地址：https://www.cnblogs.com/shanlu0000/p/11523628.html
