小雕雕的家

其實我也不知道這個效果到底叫什麼 = =

可以點這看我做完的 demo

暫時叫他"浮動圖片說明文字"好了

為了SEO再多唬爛幾個 "image tip"、"圖片說明"、"往上"

好了，耍完白癡

會做這個起因就是今天主管跟我說行銷部門下個月有提一個案子，叫我研究看看做法 

然後丟了一個網頁給我 

http://www.appguru.com.tw/appguru/camp/windowsapp/useful.php

就是要做那種效果 

一開始長這樣

  mouseover 後 (mouseout再縮回去) 

但因為氣泡現象的關係，所以我用JQuery的 mouseenter + mouseleave

我有稍微看了一下他的原始碼但是沒有細看......

因為自己寫出來比較好玩 XD

先貼最後的 code 再來講研究的心路歷程好了

首先引用JQuery，但都出到1.9了為何我還引用1.8..... = =

原因是因為IE 對css height跟其他瀏覽器不一樣，只好判斷瀏覽器微調

而JQuery 1.9 不支援 $.browser了.......

反正只是練習 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 

CSS

   
   .main {
      float:left;
	  overflow:hidden;
	  position:relative;
   }
   .main,.sub {
      width:150px;
	  height:135px;
   }
   .sub {
	  background-color: #67A6E4;
	  color: #FFFFFF;
      filter:alpa(opacity=80);   
      filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100,FinishOpacity=70, Style=3, StartX=0, FinishX=100, StartY=0,FinishY=16); 
      -moz-opacity:0.7;          
      opacity:0.7;               
	  padding:5px;  
	  overflow:hidden;
      height:15px;
	  *height:24px;
	  position:absolute;
	  bottom:0;
   }

HTML就這樣

JS

   
   $(document).ready(function(){
      $(".main").mouseenter(function(){	
		 var obj = $(this).find(".sub");
		  if ($.browser.msie){
		     hi = 0;
		  } else {
		     hi = 5;
		  }	  
	      obj.animate({
		     height: $(this).height() - hi
		  }, 1000, function(){
		     
		  });		     	  
	  }).mouseleave(function(){
	      var obj = $(this).find(".sub");
		  obj.stop();
		  var hi = 0;
		  if ($.browser.msie){
		     hi = 24;
		  } else {
		     hi = 15;
		  }
	      obj.animate({		     
		     height: hi
		  }, 1000, function(){
		     		  
		  });	     
	  });
   });

JS這樣就寫完了，又是在騙文章數

完整的程式碼可以到這自己檢視原始檔

http://www.socute.somee.com/test2.html

以下為心路歷程，可以不用參考

====================================================

然後我一開始在做的時候碰到了瓶頸 = =

我原本是想在圖片上面疊個 div 然後用animate去調高 div 的高度

但是我發現一個很機車的問題，那就是如果你的div 是用position:absolute去定位的話

他會去參考你上一層的定位，如果參考不到就會參考window 0的位置

然後你用animate 去跑 height 時，就會發生div是"從上往下長高"

因此後來把父項目改為 position:relative，然後子項目 position:absolute 加上 bottom:0px 就搞定了

(意思就是以bottom:0px 的位置為參考點) 然後透過animate div 就會往上長了

最後的版本是用 overflow:hidden 把不顯示的內容先暫時藏起來

mouseenter 的時候再用 animate 跑出來