实现手风琴滑动展示效果的jQuery插件jquery.zaccordion.js_时代Java(NowJava.com) -JS/jQuery代码 -演示与下载 -时代Java

zAccordion Examples

Example 1

Each slide is 600 x 270 pixels. I've set the width of the accordion to 960 and the slideWidth to 600. The size of the tabs will be calculated automatically. This is probably the best way to fire the accordion.


$(document).ready(function() {
	$("#example1").zAccordion({
		timeout: 4000,
		slideWidth: 600,
		width: 960,
		height: 270
	});
});
			

Example 2

Each slide is 500 x 220 pixels. I've set the width of the accordion to 780 and the tabWidth to 150. The size of the slides will be calculated automatically.

The starting slide is set to 1 (the second slide of slides 0, 1, and 2). The accordion does not auto play. I've also set the accordion to trigger on mouseover.

$(document).ready(function() {
	$("#example2").zAccordion({
		startingSlide: 1,
		auto: false,
		speed: 100,
		tabWidth: 150,
		width: 780,
		height: 220
	});
});
			

Example 3

Lorem ipsum dolor sit

Vivamus vel neque nec est hendrerit aliquet. Donec sed cursus sapien. Aenean auctor egestas turpis nec aliquam.

Donec a elit nisi

Proin sit amet massa vel elit pulvinar hendrerit eu nec odio. Maecenas faucibus odio sit amet nunc semper accumsan.

Duis vitae suscipit neque

Nunc porta commodo dolor, in vestibulum neque ullamcorper non. Nunc elementum ante in metus mollis sit amet consequat justo facilisis.

Aliquam erat volutpat

Donec in quam purus, eget placerat elit. Vivamus feugiat tincidunt elit, varius tincidunt erat scelerisque id. Morbi aliquam dui bibendum est viverra ultrices.

Start 1 2 3 4 Stop

This is probably the most practical example. Each slide has its own class and custom background image. I've set the text inside each of the slides to display only for the class with the open slide. I've also customized the slide class names. The JavaScript and CSS are below:

$(document).ready(function() {
	var accordion = $("#example3").zAccordion({
		slideWidth: 600,
		width: 900,
		height: 350,
		timeout: 3000,
		slideClass: "frame",
		slideOpenClass: "frame-open",
		slideClosedClass: "frame-closed",
		easing: "easeOutCirc"
	});
	$("#thumbs .thumb-0").click(function(){
		accordion.start();
		return false;
	});
	$("#thumbs .thumb-1").click(function(){
		accordion.click(0);
		return false;
	});
	$("#thumbs .thumb-2").click(function(){
		accordion.click(1);
		return false;
	});
	$("#thumbs .thumb-3").click(function(){
		accordion.click(2);
		return false;
	});
	$("#thumbs .thumb-4").click(function(){
		accordion.click(3);
		return false;
	});
	$("#thumbs .thumb-5").click(function(){
		accordion.stop();
		return false;
	});
});
			
#example3 ul {list-style:none;}
#example3 h3 {color:#fff;text-transform:uppercase;font-size:24px;}
#example3 p {color:#fff;}
#example3 .frame-1 {background:url(images/slide1.gif) top left repeat;}
#example3 .frame-2 {background:url(images/slide2.gif) top left repeat;}
#example3 .frame-3 {background:url(images/slide3.gif) top left repeat;}
#example3 .frame-4 {background:url(images/slide4.gif) top left repeat;}
#example3 .frame-content {width:360px;padding:100px 120px;}
#example3 .frame-closed .frame-content {display:none;}
#example3 .frame-open .frame-content {display:block;}
			

代码整理:时代Java(NowJava.com) 

转载请注明出处,此代码仅供学习交流,请勿用于商业用途。

下载代码说明
X关闭

几行代码实现手风琴滑动展示效果的jQuery插件jquery.zaccordion.js

实现手风琴滑动展示效果的jQuery插件jquery.zaccordion.js,有了这个插件你只需要简单的几行代码即可制作一个手风琴风格的滑动展示特效,可以是图片展示,也可以是图文混排内容展示,经测试简单、时尚、大方、效果非常不错。