当前位置： 代码迷 >> Web前端 >> 鼠标经过掩藏图片显示文字
  详细解决方案

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

热度：396   发布时间：2013-12-21 20:16:01.0
鼠标经过隐藏图片显示文字

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

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

?

?

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

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.