您的位置: 首页  >  文章  >  鼠标悬浮 浮动放大 expand 效果

鼠标悬浮 浮动放大 expand 效果

分类: 文章 • 2024-10-10 08:27:04

要求效果：

1.鼠标浮动在div上 要求div动态浮出 有膨胀效果

2.切换须柔和 且 无缝相隔

3.鼠标离开后恢复原状

4.实现图片缩放效果的完美展示

源码下载:hover.zip

效果图：

鼠标悬浮 浮动放大 expand 效果

主要代码展示：

Html代码 鼠标悬浮 浮动放大 expand 效果
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>jquery</title>
  6. <linkhref="style.css"type="text/css"rel="stylesheet"/>
  7. <scripttype="text/javascript"src="jquery.js"></script>
  8. <scripttype="text/javascript">
  10. var_gaq_gaq=_gaq||[];
  11. _gaq.push(['_setAccount','UA-21468787-1']);
  12. _gaq.push(['_trackPageview']);
  14. (function(){
  15. varga=document.createElement('script');ga.type='text/javascript';ga.async=true;
  16. ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
  17. vars=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s);
  18. })();
  20. </script></head>
  22. <body>>
  23. <scripttype="text/javascript">
  24. $(function(){
  26. varcont_left=$("#container").position().left;
  28. $("UL.templatesLI").hover(function(){
  29. //hoverin
  30. $(this).css("z-index",2);
  31. animateB($(this).find("A"));
  32. animateB($(this).find("IMG"));
  33. },function(){
  34. //hoverout
  35. $(this).css("z-index",0);
  36. reversAnimationB($(this).find("A"));
  37. reversAnimationB($(this).find("IMG"));
  38. });
  41. functionanimateB(obj){
  42. $(obj).animate({
  43. height:"189",
  44. width:"265",
  45. left:"-=25",
  46. top:"-=25"
  47. },"1000");
  48. }
  50. functionreversAnimationB(obj){
  51. $(obj).animate({
  52. height:"139",
  53. width:"215",
  54. left:"+=25",
  55. top:"+=25"
  56. },"1000");
  57. }
  59. $("#containera").each(function(index){
  60. varleft=(index*0)+cont_left;
  61. $(this).css("left",left+"px");
  62. });
  64. });
  65. </script>
  67. <styletype="text/css">
  68. *{margin:0;padding:0;list-style-type:none;}
  69. a,img{border:0;}
  70. body{font:10px/180%Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
  71. /*container*/
  72. #container{position:relative;width:766px;margin:100px00100px;}
  73. #containerli{position:relative;left:0;top:0;z-index:0;}
  74. .templatesli{float:left;height:210px;width:252px;}
  75. .templatesa{display:block;height:139px;padding:7px5px34px;text-align:center;width:215px;cursor:pointer;position:relative;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:#6662px4px8px;-moz-box-shadow:#6662px4px8px;box-shadow:#6662px4px8px;background:#ffffff;background:-webkit-gradient(linear,00,0bottom,from(#ffffff),to(#ffffff));background:-webkit-linear-gradient(#ffffff,#ffffff);background:-moz-linear-gradient(#ffffff,#ffffff);background:-ms-linear-gradient(#ffffff,#ffffff);background:-o-linear-gradient(#ffffff,#ffffff);background:linear-gradient(#ffffff,#ffffff);-pie-background:linear-gradient(#ffffff,#ffffff);}
  76. .btn20{float:left;height:20px;font:1.2em/20pxArial;text-align:center;padding:020px;text-align:center;width:40px;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:#6662px2px2px;-moz-box-shadow:#6662px2px2px;box-shadow:#6662px2px2px;background:#009fd8;background:-webkit-gradient(linear,00,0bottom,from(#009fd8),to(#0088ce));background:-webkit-linear-gradient(#009fd8,#0088ce);background:-moz-linear-gradient(#009fd8,#0088ce);background:-ms-linear-gradient(#009fd8,#0088ce);background:-o-linear-gradient(#009fd8,#0088ce);background:linear-gradient(#009fd8,#0088ce);-pie-background:linear-gradient(#009fd8,#0088ce);}
  77. .templatesimg{width:215px;height:139px;}
  78. .templates.btnLine{position:absolute;bottom:8px;left:6px;right:6px;display:block;}
  79. .templates.price{font:1.2em/20pxArial;float:right;}
  80. </style>
  82. <divid="container">
  83. <ulclass="templatesclearfix">
  84. <li>
  85. <ahref="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html">
  86. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg"/>
  87. <divclass="btnLine">
  88. <spanclass="btn20">下载</span>
  89. <spanclass="price">积分:20</span>
  90. </div>
  91. </a>
  92. </li>
  93. <li>
  94. <ahref="http://www.jsfoot.com/jquery/images/gg/2012-04-21/574.html">
  95. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/gg/2012-04-21/smallec5434ea1175ba57996a155400fc315d.jpg"/>
  96. <divclass="btnLine">
  97. <spanclass="btn20">下载</span>
  98. <spanclass="price">积分:20</span>
  99. </div>
  100. </a>
  102. </li>
  103. <li>
  104. <ahref="http://www.jsfoot.com/jquery/images/more/2012-04-13/559.html">
  105. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-13/small1ef40ddb8e4798d1737bbc414cfb17ec.jpg"/>
  106. <divclass="btnLine">
  107. <spanclass="btn20">下载</span>
  108. <spanclass="price">积分:20</span>
  109. </div>
  110. </a>
  111. </li>
  112. <li>
  113. <ahref="http://www.jsfoot.com/jquery/images/qh/2012-04-13/557.html">
  114. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/qh/2012-04-13/small578c5d822200e38fa692f59d6a7f92d2.jpg"/>
  115. <divclass="btnLine">
  116. <spanclass="btn20">下载</span>
  117. <spanclass="price">积分:20</span>
  118. </div>
  119. </a>
  120. </li>
  121. <li>
  122. <ahref="http://www.jsfoot.com/jquery/images/fdj/2012-04-08/543.html">
  123. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/fdj/2012-04-08/smallc40edfd12471e5104437d58c348cc5ac.jpg"/>
  124. <divclass="btnLine">
  125. <spanclass="btn20">下载</span>
  126. <spanclass="price">积分:20</span>
  127. </div>
  128. </a>
  129. </li>
  130. <li>
  131. <ahref="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html">
  132. <imgalt=""src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg"/>
  133. <divclass="btnLine">
  134. <spanclass="btn20">下载</span>
  135. <spanclass="price">积分:20</span>
  136. </div>
  137. </a>
  138. </li>
  139. </ul>
  140. </div>
  142. </body>
  143. </html>

Html代码 鼠标悬浮 浮动放大 expand 效果
  1. @charset"utf-8";
  2. /*reset*/
  3. *{margin:0;padding:0;list-style-type:none;}
  4. a{blr:expression(thisthis.onFocus=this.blur())}
  5. :focus{outline:0;}
  6. label{cursor:pointer;}
  7. img{vertical-align:middle;}
  8. table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
  9. h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}
  10. abbr,acronym{border:0;font-variant:normal}
  11. address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
  12. input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
  13. input,button,textarea,select{*font-size:100%}
  14. a,img{border:0;}
  15. a,a:visited{color:#5e5e5e;text-decoration:none;}
  16. a:hover{color:#4183C4;text-decoration:underline;}
  17. .clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
  18. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  19. .clearfix{display:inline-table;}/*HidesfromIE-mac\*/
  20. *html.clearfix{height:1%;}
  21. .clearfix{display:block;}/*EndhidefromIE-mac*/
  22. *+html.clearfix{min-height:1%;}
  23. body{font:12px/180%Arial,Lucida,Verdana,"宋ä½"",Helvetica,sans-serif;color:#333;background:#fff;}
  24. /*shortcut*/
  25. .shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
  26. *html,*htmlbody/*修正IE6振动bug*/{background-image:url(about:blank);background-attachment:fixed;}
  27. *html.shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
  28. .shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px0px2pxrgba(0,0,0,0.2);border-bottom:1pxsolid#DDDDDD;}
  29. .shortcuth1{font-size:14px;font-family:"微软雅é»'","宋ä½"";}
  30. .shortcuta,.shortcuth1{padding:0px10px;letter-spacing:1px;color:#333;text-shadow:0px1px1px#fff;display:block;float:left;}
  31. .shortcuta:hover{background:#fff;}
  32. .shortcutspan.right{float:right;}
  33. .shortcutspan.righta{float:left;display:block;color:#ff6600;font-weight:800;}
  34. .headeline{height:40px;overflow:hidden;}
  35. .adv960x90{width:960px;height:90px;overflow:hidden;border:solid1px#E6E6E6;margin:0auto;}

相关推荐