$.fn.accordion = function (colors,width) { //如果用户没有传参数,设置默认值 colors = colors || []; width = width || 20; //让当前的对象去找li var $li = this.find("li"); //渲染颜色 $li.each(function (index,ele) { $(ele).css("backgroundColor",colors[index]) }) //获取当前显示800的那个宽度 = 总宽度 - width*剩下四个li的长度 var maxLength = this.width() - width*($li.length-1); //计算240的宽度 即平均值 var avgLength = this.width() / $li.length; $li.mouseenter(function(){ $(this).stop().animate({width:maxLength}).siblings().stop().animate({width:width}); }) $li.mouseleave(function () { $li.stop().animate({width:avgLength}); }) }
调用例子 <!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: 120px; 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> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="js/jquery-1.12.4.js"></script> <script src="jquery.accordion.js"></script> <script> var colors = ["pink","red","cyan","yellow","blue","hotpink","orange","grey","green","cyan"]; $("#box").accordion(colors,100); /* var colors = ["pink","red","cyan","yellow","blue"]; var $li = $("#box li"); $li.each(function (index,ele) { $(ele).css("backgroundColor",colors[index]) }) $li.mouseenter(function(){ $(this).stop().animate({width:800}).siblings().stop().animate({width:100}); }) $li.mouseleave(function () { $li.stop().animate({width:240}); }) */ </script> </body> </html>