使用動畫完成 簡單的百葉窗效果
阿新 • • 發佈：2018-11-25
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.12.3.min.js"></script> <style> * { margin: 0; padding: 0 } .container { width: 800px; height: 300px; border: 1px solid skyblue; margin: 100px auto; position: relative; overflow: hidden; } .container .imgUL { list-style: none; } .container .imgUL li { position: absolute; } .container .imgUL li .cover { position: absolute; width: 100%; height: 300px; background:rgba(0,0,0,0.5); } .li1 { left: 160px } .li2 { left: 320px } .li3 { left: 480px } .li4 { left: 640px } </style> </head> <body> <div class="container"> <ul class="imgUL"> <li class="li0"> <div class="cover"></div> <img src="img/0.jpg"> </li> <li class="li1"> <div class="cover"></div> <img src="img/1.jpg"> </li> <li class="li2"> <div class="cover"></div> <img src="img/2.jpg"> </li> <li class="li3"> <div class="cover"></div> <img src="img/3.jpg"> </li> <li class="li4"> <div class="cover"></div> <img src="img/4.jpg"> </li> </ul> <script> var lis = $('.container li'); lis.mouseenter(function () { console.log('aaa'); $(this).find('.cover').stop(true).fadeOut(); }).mouseleave(function () { $(this).find('.cover').stop(true).fadeIn(); lis.stop(true); $('.li1').animate({'left':160},500); $('.li2').animate({'left':320},500); $('.li3').animate({'left':480},500); $('.li4').animate({'left':640},500); }); $('.li0').mouseenter(function () { lis.stop(true); $('.li1').animate({'left':560},500); $('.li2').animate({'left':620},500); $('.li3').animate({'left':680},500); $('.li4').animate({'left':760},500); }) $('.li1').mouseenter(function(){ lis.stop(true); $('.li1').animate({'left':60},500); $('.li2').animate({'left':620},500); $('.li3').animate({'left':680},500); $('.li4').animate({'left':760},500); }); $('.li2').mouseenter(function(){ lis.stop(true); $('.li1').animate({'left':60},500); $('.li2').animate({'left':120},500); $('.li3').animate({'left':680},500); $('.li4').animate({'left':760},500); }); $('.li3').mouseenter(function(){ lis.stop(true); $('.li1').animate({'left':60},500); $('.li2').animate({'left':120},500); $('.li3').animate({'left':180},500); $('.li4').animate({'left':740},500); }); $('.li4').mouseenter(function(){ lis.stop(true); $('.li1').animate({'left':60},500); $('.li2').animate({'left':120},500); $('.li3').animate({'left':180},500); $('.li4').animate({'left':240},500); }); </script> </div> </body> </html>