鼠标悬浮 浮动放大 expand 效果
程序员文章站
2022-03-02 11:17:12
...
要求效果：
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;}
- hoverstyle.zip (28.8 KB)
- 下载次数: 97