首页>>Jquery文字>>鼠标经过隐藏图片显示文字(2013-11-22)

鼠标经过隐藏图片显示文字

鼠标经过隐藏图片显示文字
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script>  
  2.   
  3. $(document).ready(function() {  
  4.     //if mouse over and mouse out  
  5.     $('.eff').hover(  
  6.     function () {  
  7.   
  8.         value = $(this).find('img').outerHeight() * -1;  
  9.   
  10.         //for left/right if you have different width and height,   
  11.         //commented out because we are using up/down in this example  
  12.         //value = $(this).find('img').outerWidth() * -1);   
  13.           
  14.         //animate the image  
  15.         // you can change the sliding direction by changing bottom to left, right or top  
  16.         // if you changed this, you will have to change the position of the hover out as well  
  17.         $(this).find('img').stop().animate({bottom: value} ,{duration:500, easing: 'easeOutBounce'});     
  18.           
  19.     },  
  20.     function () {  
  21.           
  22.         //reset the image  
  23.         // the position property (bottom), it must be same with the on in the mouseover  
  24.         $(this).find('img').stop().animate({bottom:0} ,{duration:500, easing: 'easeOutBounce'});      
  25.       
  26.     });  
  27.       
  28.     //if user clicked on the thumbnail  
  29.     $('.eff').click(function () {     
  30.         //grab and execute the first link in the thumbnail  
  31.         window.location = $(this).find('a:first').attr('href');  
  32.     });  
  33.       
  34. });  
  35.   
  36. </script>  

 

XML/HTML Code
  1. <div class="eff">  
  2.     <img src="1.gif" alt="Test 1" title="" width="126" height="126" />  
  3.     <div class="caption"><a href="http://www.freejs.net" class="header">www.freejs.net</a></div>  
  4. </div>  
  5.   
  6. <div class="eff">  
  7.     <img src="2.gif" alt="Test 1" title="" width="126" height="126" />  
  8.     <div class="caption"><a href="http://www.freejs.net" class="header">Umbrella</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>  
  9. </div>  
  10.   
  11. <div class="eff">  
  12.     <img src="3.gif" alt="Test 1" title="" width="126" height="126" />  
  13.     <div class="caption"><a href="http://www.freejs.net" class="header">Maximum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></div>  
  14. </div>  
  15.   
  16. <div class="clear"></div>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_107.html