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

原创 2013年12月05日 11:12:58

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

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

 

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

相关文章推荐

DIV CSS鼠标经过悬停在图片上时图片上方显示文字

DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现。CSS实现鼠标悬停放图片上方时显示美化内容。 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背...

30款css3实现的鼠标经过图片显示描述特效

今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述。为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari ...

当鼠标经过显示图片信息

使用Ajax写当鼠标经过显示图片信息 ImageBean package domain; public class Image { private int id; private Strin...
  • boxyuan
  • boxyuan
  • 2017年05月30日 17:06
  • 179

jquery左右滚动焦点图banner图片,鼠标经过显示上下页

jquery左右滚动焦点图banner图片,鼠标经过显示上下页 适合宽和高都比较大的页面使用演示  XML/HTML Codediv class="bannerbox">      div id="f...

JS+CSS鼠标经过文字变色

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> http://www.w3.org/1999/xhtml" >    active ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标经过隐藏图片显示文字
举报原因:
原因补充:

(最多只允许输入30个字)