最新消息:

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

菜单插件 杨红伟 1261浏览 0评论

描述: 当鼠标移动到图片上,图片就会弹起。一种是阴影式的,一种是倒影式的!
兼容浏览器: 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/demo/execute
打包下载: http://www.ijquery.cn/demo/execute/execute.zip
参数说明:
图片展示:

11

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]

 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址