鼠标悬浮浮动放大 expand 效果

guangqiang · 发表于 2013-2-7 20:08:32

要求效果：
1.鼠标浮动在div上要求div动态浮出有膨胀效果
2.切换须柔和且无缝相隔
3.鼠标离开后恢复原状
4.实现图片缩放效果的完美展示

源码下载:hover.zip
效果图：

主要代码展示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery</title><link href="style.css" type="text/css" rel="stylesheet" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-21468787-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();</script></head><body>><script type="text/javascript">$(function () {var cont_left = $("#container").position().left; $("UL.templates LI").hover(function () { // hover in $(this).css("z-index", 2); animateB($(this).find("A")); animateB($(this).find("IMG")); }, function () { // hover out $(this).css("z-index", 0); reversAnimationB($(this).find("A")); reversAnimationB($(this).find("IMG")); }); function animateB(obj) { $(obj).animate({ height: "189", width: "265", left: "-=25", top: "-=25" }, "1000"); } function reversAnimationB(obj) { $(obj).animate({ height: "139", width: "215", left: "+=25", top: "+=25" }, "1000"); } $("#container a").each(function (index) { var left = (index * 0) + cont_left; $(this).css("left", left + "px"); });});</script><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:10px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}/* container */#container{position:relative;width:766px;margin:100px 0 0 100px;}#container li{position:relative;left:0;top:0;z-index:0;}.templates li{float:left;height:210px;width:252px;}.templates a{display:block;height:139px;padding:7px 5px 34px;text-align:center;width:215px;cursor:pointer;position:relative;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:#666 2px 4px 8px;-moz-box-shadow:#666 2px 4px 8px;box-shadow:#666 2px 4px 8px;background:#ffffff;background:-webkit-gradient(linear, 0 0, 0 bottom, 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);}.btn20{float:left;height:20px;font:1.2em/20px Arial;text-align:center;padding:0 20px;text-align:center;width:40px;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:#666 2px 2px 2px;-moz-box-shadow:#666 2px 2px 2px;box-shadow:#666 2px 2px 2px;background:#009fd8;background:-webkit-gradient(linear, 0 0, 0 bottom, 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);}.templates img{width:215px;height:139px;}.templates .btnLine{position:absolute;bottom:8px;left:6px;right:6px;display:block;}.templates .price{font:1.2em/20px Arial;float:right;}</style><div id="container"><ul class="templates clearfix"><li><a href="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li><li><a href="http://www.jsfoot.com/jquery/images/gg/2012-04-21/574.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/gg/2012-04-21/smallec5434ea1175ba57996a155400fc315d.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li><li><a href="http://www.jsfoot.com/jquery/images/more/2012-04-13/559.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-13/small1ef40ddb8e4798d1737bbc414cfb17ec.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li><li><a href="http://www.jsfoot.com/jquery/images/qh/2012-04-13/557.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/qh/2012-04-13/small578c5d822200e38fa692f59d6a7f92d2.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li><li><a href="http://www.jsfoot.com/jquery/images/fdj/2012-04-08/543.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/fdj/2012-04-08/smallc40edfd12471e5104437d58c348cc5ac.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li><li><a href="http://www.jsfoot.com/jquery/images/more/2012-04-23/576.html"><img alt="" src="http://www.jsfoot.com/d/file/jquery/images/more/2012-04-23/smallab09b1de296db0fcd9792a884814d223.jpg" /><div class="btnLine"><span class="btn20">下载</span><span class="price">积分: 20</span></div></a></li></ul></div></body></html>
@charset "utf-8";/* reset */*{margin:0;padding:0;list-style-type:none;}a{blr:expression(this.onFocus=this.blur())}:focus{outline:0;}label{cursor:pointer;}img{vertical-align:middle;}table{empty-cells:show;border-collapse:collapse;border-spacing:0;}h1{font-size:16px;}h2,h3,h4{font-size:14px;}h5,h6{font-size:12px;}abbr,acronym{border:0;font-variant:normal}address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}input,button,textarea,select{*font-size:100%}a,img{border:0;}a,a:visited{color:#5e5e5e; text-decoration:none;}a:hover{color:#4183C4;text-decoration:underline;}.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}.clearfix{display:inline-table;}/* Hides from IE-mac \*/*html .clearfix{height:1%;}.clearfix{display:block;}/* End hide from IE-mac */*+html .clearfix{min-height:1%;}body{font:12px/180% Arial,Lucida,Verdana,"å®‹ä½"",Helvetica,sans-serif;color:#333;background:#fff;}/* shortcut */.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}*html,*html body /* ä¿®æ£IE6æŒ¯åŠ¨bug */{background-image:url(about:blank);background-attachment:fixed;}*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}.shortcut h1{font-size:14px;font-family:"å¾®è½¯é›…é»'","å®‹ä½"";}.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}.shortcut a:hover{background:#fff;}.shortcut span.right{float:right;}.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}.headeline{height:40px;overflow:hidden;}.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}

		自动登录	找回密码
密码			立即注册

鼠标悬浮 浮动放大 expand 效果

鼠标悬浮浮动放大 expand 效果