jquery手风琴焦点图切换代码



107 424 142



特效描述:jquery手风琴 焦点图切换代码,jquery手风琴焦点图切换代码

代码结构

1. 引入CSS

<link type="text/css" rel="stylesheet" href="style/style.css" media="all" />

2. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

3. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.main{width:653px;margin:100px auto;border:solid 1px #ddd;}
.picon{clear:both;height:400px;padding-left:4px;overflow:hidden;background:#000;position:relative;}
.picon ul{position:absolute;top:0;left:0;height:400px;width:1000px;}
.picon li{float:left;height:400px;border-right:1px solid #ddd;width:79px;position:relative;overflow:hidden;}
.picon li.cur div{display:block;}
.picon li div{position:absolute;bottom:0;left:0;z-index:9;height:76px;background:url(images/shadow.png) repeat;font-family:Arial, Helvetica, sans-serif;font-weight:900;width:100%;color:#fff;display:none;}
*html .picon li div{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="images/shadow.png");background:none;}
.picon li div h3{padding:4px 0 0 10px;line-height:30px;font-size:16px;line-height:26px;font-weight:900;}
.picon li div p{line-height:20px;padding:0px 10px 0;font-size:13px;}
.picon li div a{color:#fff;text-decoration:none;}
</style>
	<div class="main">
		<div class="picon" id="picon">
			<ul>
				<li>
					<img width="252" height="400" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/3485.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery图片特效</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换" src="images/32469.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery手风琴</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery图片切换滚动 水平手风琴切换滚动鼠标滑过图片水平切换</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单" src="images/3247.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery导航菜单</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery 导航菜单 jquery和CSS3制作一个动画导航的向下滑动框菜单</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动" src="images/3458.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery文字特效</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery 文字特效霓虹灯文字效果使用jQuery和CSS" src="images/39.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery文字特效</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery 文字特效霓虹灯文字效果使用jQuery和CSS</a></p>
					</div>
				</li>
				<li>
					<img width="252" height="400" alt="jquery表单验证 formvalidator 插件解决整站提交表单验证问题" src="images/34856.jpg" />
					<div>
						<h3><a href="http://www.51qianduan.com//">jquery表单验证</a></h3>
						<p><a href="http://www.51qianduan.com//" target="_blank">jquery表单验证 formvalidator 插件解决整站提交表单验证问题</a></p>
					</div>
				</li>
			</ul>
		</div>
	</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 焦点图幻灯片 带简介的焦点图 图片滑动 滑动手风琴 手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到