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

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

演示

 

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