이번에는 마우스 반응형 타오바오 애니메이션 효과 구현을 가져오겠습니다. 마우스 반응형 타오바오 애니메이션 효과를 만들 때 주의사항은 무엇인가요? 다음은 실제 사례입니다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery淘宝动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js"></script> <style> * { margin: 0; padding: 0; font-family:"微软雅黑" } #box{ padding-left:20px; background-color:#f9f9f9; border:1px solid #ccc; width:236px; height:250px; margin:0 auto; } #box a{ width:50px; height:60px; border:1px solid #ccc; float:left; margin:10px 10px; background-color:#FFFFFF; text-align:center; font-size:14px; position:relative; } #box a i{ position:absolute; top:15px; left:18px; } #box a p{ position:absolute; top:36px; left:5px; } #box a{ cursor:pointer; } </style> </head> <body> <p id="box"> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> <a><i><img src="rec_view(1).png"/></i><p>文字玩</p></a> </p> <script> $(function(){ $("#box a").mouseenter(function(){ $(this).find("i").animate({top:"-15px",opacity:"0"},300, function(){ $(this).css({top:"25px"}); $(this).animate({top:"15px",opacity:"1"},200) }) }) }); </script> </body> </html>
이 애니메이션은 마우스를 슬라이드할 때 그라데이션이 위쪽으로 날아가는 시각적 효과를 얻을 수 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 마우스 반응형 Taobao 애니메이션 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!