標題：MouseOver時滑動圖片
出處：A.PAO designSTUDIO BLOG
時間：Wed, 01 Feb 2012 13:01:45 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/869/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=1373


#id名 {
  width:296px;
  height:130px; //半分の高さ
  position:relative;
  overflow:hidden;
}


JavaScript為以下的寫法

<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
  $("#id名 a").hover(function(){ //id之下 a:hover 的動作
    $("img", this).stop().animate({top:"-130px"},{duration:200}); //從top位置-130px距離 以200ms 速度移動至0px位置
  }, function() { //マウスが外れた時
    $("img", this).stop().animate({top:"0px"},{duration:200});//從top位置0px回原位 以200ms 速度移動
  });
});
</script>


出處：
http://www.htmldrive.net/items/show/886/Useful-image-hover-slide-effect-with-jQuery

參考：
http://www.skuare.net/test/jimghover.html

demo:
http://apao.zapto.org/~apao/jQuery/MouseOver/


Generated by Bo-blog 2.1.1 Release