编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

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

作者:管子(zero)的杂乱空间  发布日期:2013-12-05 22:42:17
  • 收藏本文    我要投稿
  •  

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

     

    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>

         


         
Tag标签:鼠标  经过  隐藏  
  • 专题推荐