仿淘寶的一個圖片動畫效果
阿新 • • 發佈：2019-01-14
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>圖片動畫</title><style>*{ margin:0; padding:0;}li,ul{ list-style:none}img{ border:none;}.item{float:left; width:162px; padding:0 2px; height:120px; overflow:hidden; margin:200px auto;}.item .item-t{ height:162px; background:#f00;}.item .item-b{ height:162px; background:#063;}</style><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script><script>$(document).ready(function(){var changeH=$(".item-t").outerHeight();//變化的高度$(".itemwrap .item").each(function(index){$(this).hover(function(){//mouseenter程式碼段$(this).find(".item-t").stop(true).animate({"margin-top":-changeH},300);},function(){//mouseleave程式碼段$(this).find(".item-t").stop(true).animate({"margin-top":0},300);});}) })</script></head><body><div class="itemwrap"><div class="item"><div class="item-t"></div> <div class="item-b"></div></div><div class="item"><div class="item-t"></div> <div class="item-b"></div></div><div style="clear:both"></div></div></body></html>