描述: 当鼠标移动到图片上,图片就会弹起。一种是阴影式的,一种是倒影式的!
兼容浏览器: IE7+/Firefox/Google Chrome
官方链接: http://www.adrianpelletier.com/2 ... ect-with-jquery-ui/
JS下载: http://www.ijquery.cn/js/execute.js
预览: http://www.ijquery.cn/study/demo/execute
打包下载: http://www.ijquery.cn/study/demo/execute/execute.zip
参数说明: 无
图片展示:
JS引用代码:
[js]
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://www.ijquery.cn/js/execute.js"></script>
[/js]
HTML代码:
[html]
<h2>Reflection-倒影</h2>
<ul id="nav-reflection">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
<h2>Shadow-阴影</h2>
<ul id="nav-shadow">
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
<li><a href="#" title=""></a></li>
</ul>
[/html]
CSS代码:
[css]<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />[/css]
即:
[css]
#nav-reflection {
margin: 0 auto 50px auto;
padding: 50px 0 0 172px;
width: 452px;
min-height: 130px;
list-style: none;
}
#nav-reflection li {
margin-right: 15px;
width: 59px;
float: left;
}
#nav-reflection a, #nav-reflection a:visited, #nav-reflection a:hover {
width: 59px;
height: 59px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/icons.png) no-repeat;
display: block;
}
#nav-reflection span {
margin-top: 1px;
width: 59px;
height: 34px;
text-align: center;
background: url(../images/icons-reflections.jpg) no-repeat;
display: block;
}
/* Button Colors */
#nav-reflection li.button-color-1 a {
background-position: -3px -3px;
}
#nav-reflection li.button-color-2 a {
background-position: -92px -3px;
}
#nav-reflection li.button-color-3 a {
background-position: -181px -3px;
}
#nav-reflection li.button-color-4 a {
background-position: -270px -3px;
}
/* Button Reflection Color */
#nav-reflection li.button-color-1 span {
background-position: 0 0;
}
#nav-reflection li.button-color-2 span {
background-position: -89px 0;
}
#nav-reflection li.button-color-3 span {
background-position: -178px 0;
}
#nav-reflection li.button-color-4 span {
background-position: -267px 0;
}
/* =Shadow Nav
-------------------------------------------------------------------------- */
#nav-shadow {
margin: 0 auto 50px auto;
padding: 50px 0 0 127px;
width: 497px;
min-height: 130px;
text-align: center;
list-style: none;
}
#nav-shadow li {
margin-right: 15px;
width: 81px;
height: 72px;
position: relative;
float: left;
}
#nav-shadow a, #nav-shadow a:visited, #nav-shadow a, #nav-shadow a:hover {
margin: 0 auto;
width: 59px;
height: 59px;
text-indent: -9999px;
overflow: hidden;
background: url(../images/icons.png) no-repeat;
display: block;
position: relative;
z-index: 2;
}
/* Button Colors */
#nav-shadow li.button-color-1 a {
background-position: -3px -3px;
}
#nav-shadow li.button-color-2 a {
background-position: -92px -3px;
}
#nav-shadow li.button-color-3 a {
background-position: -181px -3px;
}
#nav-shadow li.button-color-4 a {
background-position: -270px -3px;
}
/* Button Shadow */
#nav-shadow li img.shadow {
margin: 0 auto;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
}
[/css]