手风琴效果-02
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{margin: 0; padding: 0;} ul{ width:1080px; height:632px; overflow: hidden; } ul li{ width: 70px; height: 632px; float: left; list-style: none; transition:width 0.5s; } .on{ width: 800px; } </style> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script> $(function(){ $('ul li').mouseover( function() { $(this).addClass('on').siblings().removeClass('on'); }) }) </script> </head> <body> <ul> <li> <a href="javascript:;"> <img src="images/num-01.jpg"> </a> </li> <li > <a href="javascript:;"> <img src="images/num-02.jpg"> </a> </li> <li> <a href="javascript:;"> <img src="images/num-03.jpg"> </a> </li> <li > <a href="javascript:;"> <img src="images/num-04.jpg"> </a> </li> <li class="on"> <a href="javascript:;"> <img src="images/num-05.jpg"> </a> </li> </ul> </body> </html>