描述: 当鼠标移动到图片上,图片就会弹起。一种是阴影式的,一种是倒影式的!
兼容浏览器: IE7+/Firefox/Google Chrome
官方链接: http://www.adrianpelletier.com/2 ... ect-with-jquery-ui/
JS下载: http://ijquery.360sites.cn/js/execute.js
预览: http://ijquery.360sites.cn/demo/execute打包下载: http://ijquery.360sites.cn/demo/execute/execute.zip参数说明: 无
图片展示:
JS引用代码:
- <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/jquery-1.3.2.min.js"></script>
- <script type="text/javascript" charset="utf-8" src="http://ijquery.360sites.cn/js/execute.js"></script>
- <h2>Reflection-倒影</h2>
- <ul id="nav-reflection">
- <li class="button-color-1"><a href="#" title=""></a></li>
- <li class="button-color-2"><a href="#" title=""></a></li>
- <li class="button-color-3"><a href="#" title=""></a></li>
- <li class="button-color-4"><a href="#" title=""></a></li>
- </ul>
-
- <h2>Shadow-阴影</h2>
- <ul id="nav-shadow">
- <li class="button-color-1"><a href="#" title=""></a></li>
- <li class="button-color-2"><a href="#" title=""></a></li>
- <li class="button-color-3"><a href="#" title=""></a></li>
- <li class="button-color-4"><a href="#" title=""></a></li>
- </ul>
- <link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
- #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;
- }
[转] http://ijquery.360sites.cn/forum.php?mod=viewthread&tid=25