February 1, 2012
點擊在新視窗中瀏覽此圖片

#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/
Facebook twitter LINEk
文章来自: 本站原創
0 Comment(s)
我要發表評論
暱稱
密碼 [ 訪客無需密碼 ]
電郵
網址
開啟HTML 開啟UBB 開啟表情 隱藏 記住我