huanggr
手风琴想必大家都是非常熟悉的东西了吧，其实前端也有叫做手风琴的效果，接下来我们一起看看吧！
前端的手风琴效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE HTML> <html> <head> <title>please enter your title</title> <meta charset="utf-8"> <meta name="Author" content=""> <style type='text/css'> *{ margin:0; padding:0;} #wrap{ width:1090px; height:429px; margin:160px auto; overflow:hidden; } #wrap ul{ width:120%; } #wrap ul li{ list-style:none; width:100px; height:429px; float:left; background: #ccc; } #wrap ul li .txt{ width:100px; height:429px; background:rgba(0,0,0,.5); overflow:hidden; } #wrap ul li .txt p{ padding:0px 42px; background:rgba(0,0,0,.5); color:#fff; font-family:'Microsoft yahei'; font-size:14px; } </style> </head> <body> <div id="wrap"> <ul> <li> <div class='txt'> <p>页面一</p> </div> </li> <li> <div class='txt'> <p>页面二</p> </div> </li> <li> <div class='txt'> <p>页面三</p> </div> </li> <li> <div class='txt'> <p>页面四</p> </div> </li> </ul> </div> <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script> <script type="text/javascript"> $('#wrap ul li').hover(function(){ $(this).stop().animate({ width : '789px' },500).siblings().stop().animate({ width : '100px' },500); }); </script> </body> </html> |
7