jquery图片广告flash动画自定义横幅通栏插件


jquery图片广告flash动画自定义横幅通栏插件
jquery图片广告flash动画自定义横幅通栏插件以及图片广告、flash动画、自定义横幅通栏等js/jquery网页特效代码下载。

1. 引入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>
<script type="text/javascript" src="js/jquery.transform-0.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.banner.js"></script>

2. HTML代码

<div class="demo">
	<h1>jQuery的自定义动画横幅</h1>
	<div id="ca_banner1" class="ca_banner ca_banner1">
		<div class="ca_slide ca_bg1">
			<div class="ca_zone ca_zone1"><!--Product-->
				<div class="ca_wrap ca_wrap1">
					<div class="picimg img01 ca_shown"></div>
					<div class="picimg img02" style="display:none;"></div>
					<div class="picimg img01" style="display:none;"></div>
					<div class="picimg img02" style="display:none;"></div>
					<div class="picimg img01" style="display:none;"></div>
					<div class="picimg img02" style="display:none;"></div>
				</div>
			</div>
			<div class="ca_zone ca_zone2"><!--Line-->
				<div class="ca_wrap ca_wrap2">
					<div class="text line01 ca_shown"></div>
					<div class="text line02" style="display:none;"></div>
				</div>
			</div>
			<div class="ca_zone ca_zone3"><!--Title-->
				<div class="ca_wrap ca_wrap3">
					<div class="tit title01 ca_shown"></div>
					<div class="tit title02" style="display:none;"></div>
					<div class="tit title01" style="display:none;"></div>
				</div>
			</div>
		</div>
	</div>
	<div id="ca_banner2" class="ca_banner ca_banner2">
		<div class="ca_slide ca_bg2">
			<div class="ca_zone ca_zone1"><!--Product Top-->
				<div class="ca_wrap ca_wrap1">
					<div class="smallpic simg01 ca_shown"></div>
					<div class="smallpic simg02" style="display:none;"></div>
				</div>
			</div>
			<div class="ca_zone ca_zone2"><!--Product Middle-->
				<div class="ca_wrap ca_wrap2">
					<div class="smallpic simg03" class="ca_shown"></div>
					<div class="smallpic simg03" style="display:none;"></div>
				</div>
			</div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<script type="text/javascript">
$(function() {
//we want 5 steps / slides for the first banner
//let's define what happens for each one:
/*
the variable steps has the following structure:
steps:[step1,step2,...,stepN]
On each step/transition we define the transition for each one of the areas in the banner
For the first banner for example, we have 3 areas, each one with a specific number
of images (the images inside of the "ca_wrap" div). One image is shown as default, 
which for our examples is always the first one (1). 
So as an example, our first step/transition can be:
[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
[{"to" : "1"}, {}],
[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
This means that for the first transition, the first and third areas are going to show
their second image, and the second area remains untouched. When we change each image we 
apply a specific effect, which is defined in the plugin.
*/
	$('#ca_banner1').banner({
		steps : [
			[
				//1 step:
				[{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}],
				[{"to" : "1"}, {}],
				[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
			],
			[
				//2 step:
				[{"to" : "3"}, {"effect":"slideOutTop-slideInTop"}],
				[{"to" : "1"}, {}],
				[{"to" : "2"}, {}]
			],
			[
				//3 step:
				[{"to" : "4"}, {"effect": "zoomOut-zoomIn"}],
				[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}],
				[{"to" : "2"}, {}]
			],
			[
				//4 step
				[{"to" : "5"}, {"effect": "slideOutBottom-slideInTop"}],
				[{"to" : "2"}, {}],
				[{"to" : "3"}, {"effect": "zoomOut-zoomIn"}]
			],
			[
				//5 step
				[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
				[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],
				[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
			]
		],
		total_steps	: 5,
		speed : 3000
	});
	//we want 4 steps/slides for the second banner:
	$('#ca_banner2').banner({
		steps : [
			[
				//1 step:
				[{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}],
				[{"to" : "2"}, {"effect": "slideOutTop-slideInTop"}]
			],
			[
				//2 step:
				[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}],
				[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],
			],
			[
				//3 step:
				[{"to" : "2"}, {"effect": "slideOutLeft-slideInLeft"}],
				[{"to" : "2"}, {"effect": "slideOutRight-slideInRight"}]
			],
			[
				//4 step:
				[{"to" : "1"}, {"effect":"zoomOutRotated-zoomInRotated"}],
				[{"to" : "1"}, {"effect": "zoomOutRotated-zoomInRotated"}],
			]
		],
		total_steps	: 4,
		speed 		: 2000
	});
});
</script>

相关推荐

发表评论

相关文章