第22款插件：execute.js鼠标移动到图片上，图片就会弹起的插件(仿苹果界面)

描述： 当鼠标移动到图片上，图片就会弹起。一种是阴影式的，一种是倒影式的！
兼容浏览器： 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]