jquery ui accordion手风琴插件带动画的竖直手风琴上下伸缩展开



165 657 220



特效描述:手风琴插件 动画竖直手风琴 上下伸缩展开,

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/styles.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

3. HTML代码

<ul class="services-list">
	<li>
		<h2><a href="#" title="">CSS3+PIE圆角插件实现超酷的导航菜单和按钮</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此作品是一款可以帮助网友们美化菜单和按钮,跟丑陋的、传统的菜单和按钮说88,默认整理了4种主题颜色,网友们可以自己无限添加哦,主要用了CSS3+PIE圆角插件实现,这样就可以兼容所有浏览器啦,菜单和按钮的长度都是自适应。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Monitoreo" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title=""><strong>带动画全屏图文切换+键盘控制的Jquery焦点图</strong></a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此Jquery特效是一款效果非常酷的图片轮播,它包括了以下功能<br />1、带动画效果<br />2、全屏轮播<br />3、轮播内容由图文切换<br />4、键盘左右方向键控制左右滚动<br />5、背景跟随切换<br />6、自动播放。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Alarmas y c&aacute;maras" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title="">网友康松分享仿Win8布局+lightbox弹出层插件显示页面</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此作品是仿Win8布局+lightbox弹出层Jquery插件实现的,它把整个网站的功能都在这个布局里面展示,点击的时候以弹出层的方式来显示页面,这样就可以减少了繁琐的跳转页面操作,提高了用户体验,是一种最近比较流行的网页布局,网友们好好利用哦。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Protecci&oacute;n perimetral" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title="">一款带3D效果带略缩图的幻灯片Jquery插件</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此Jquery插件一款带3D效果带略缩图的幻灯片效果,功能非常强大,默认带有3种皮肤,用法也很简单,可以灵活设置6个参数,1、skin:皮肤目录设置,包括3个(cool,crazy,simple)2、numberOfThumbsPerScreen:略缩图的滚动个数,默认为7个。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Consorcios" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title="">网友Kevin分享原创图片滚动Jquery插件kevinScroll</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>首先非常感谢网友Kevin的无私分享,此Jquery插件实现图片滚动功能,这是他写的一款原创作品,插件命名为kevinScroll,现在分享的是V1.0版本,还在不断完善中,插件功能非常强大,可以灵活设置7个参数,页面上可以多次调用都不起冲突。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Protecci&oacute;n de personas" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title="">一款国外的四图轮播幻灯片Jquery插件</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此Jquery插件是一款国外的四图轮播幻灯片,功能不是很复杂,非常实用,图片使用跟平时的焦点图的用法有点不同,它的图片不放到主体里面,通通都作为背景图片使用,主体就用文字来描述,包含了图片播放、图片滑动、图片左右轮播。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Auditor&iacute;as" /></div>
			</div>
		</div>
	</li>
	<li>
		<h2><a href="#" title="">原生js实现3维图片里外转动放大缩小特效</a></h2>
		<div>
			<div class="service-content">
				<div class="service-info-text">
					<p>此js特效实现3维图片里外转动放大缩小功能,是一款效果非常酷的作品,作为图片轮播特效来讲,它算比较新有创意的啦,包含了图片滚动、图片放大、图片缩小、鼠标悬浮事件等功能。。。</p>
				</div>
				<div class="service-info-image"><img src="img/services/service-07.jpg" alt="Desarrollos a medida" /></div>
			</div>
		</div>
	</li>
</ul>



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


热门标签: 滑动滑过 滚动切换 滑动选项卡切换 加载动画 flash焦点图 选项卡切换 滑动手风琴 收缩收起展开 html5弹窗动画 html5动画h5动画 焦点图幻灯片 html5按钮动画 收缩导航菜单 html5图片动画 带简介的焦点图 文字切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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