名企动态网站开发--jQuery实现flash动画效果

最新推荐文章于 2021-07-21 08:22:20 发布

u013344815

最新推荐文章于 2021-07-21 08:22:20 发布

阅读量698

点赞数 1

分类专栏： Java web 文章标签： jQuery js html css 广告轮播效果

本文链接：https://blog.csdn.net/u013344815/article/details/51099827

版权

Java web 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

如有需要图片素材的朋友请联系博主，有求必应！

html代码段相对简单，只需要搭建四个div盒子，每个盒子载入三个用于生成动作的图片

html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="flash">
		    <!--定义左右切换按钮-->
			<img src="img/left.png" class="btn-l"/>
			<img src="img/right.png" class="btn-r"/>
			<!--场景一-->
			<div class="box" style="background: url(img/bg1.jpg); z-index: 3;">
				<img src="img/flash1.png" class="f-1-1"/>
				<img src="img/flash12.png" class="f-1-2"/>
				<img src="img/flash13.png" class="f-1-3"/>
		   </div>
		   	<!--场景二-->
			<div class="box" style="background: #e66c57;">
				<img src="img/flash2.png" class="f-2-1"/>
				<img src="img/flash22.png" class="f-2-2"/>
				<img src="img/flash23.png" class="f-2-3"/>
			</div>
			<!--场景三-->
			<div class="box" style="background: #202f3d;">
				<img src="img/flash3.png" class="f-3-1"/>
				<img src="img/flash32.png" class="f-3-2"/>
				<img src="img/flash33.png" class="f-3-3"/>
			</div>
			<!--场景四-->
			<div class="box" style="background: url(img/bg2.jpg);">
				<img src="img/flash4.png" class="f-4-1"/>
				<img src="img/flash42.png" class="f-4-2"/>
				<img src="img/flash43.png" class="f-4-3"/>
			</div>
			
			
			
		</div>
	</body>
</html>

此处css布局的重点在于相对定位和绝对定位的概念，绝对定位的元素需要相对定位的元素提供位置参照，四个场景相互重叠则需要绝对定位来实现，因为绝对定位不占有固定的空间，元素间互不影响，可以相互重叠。

css文件

*{
	margin: 0;
	padding: 0;
}
#flash{
	width:760px;
	height: 300px;
    background: greenyellow;
    margin: 180px auto;	
    position: relative;
}
#flash img.btn-l{
	position: absolute;
	left: 3px;
	top: 120px;
	z-index: 5;
}
#flash img.btn-r{
	position: absolute;
	right: 3px;
	top: 120px;
	z-index: 5;
}
#flash .box{
    width: 760px;
    height: 300px;
    border: 1px solid red;
    position: absolute;
    overflow: hidden;
}
#flash .box img.f-1-1{
	position: absolute;
	top: 80px;
	left: -339px;
	opacity: 0;
}
#flash .box img.f-1-2{
	position: absolute;
	top: 150px;
	left: -339px;
	opacity: 0;
}
#flash .box img.f-1-3{
	position: absolute;
	top: 0px;
	left: 760px;
	opacity: 0;
}
#flash .box img.f-2-1{
	position: absolute;
	top: 160px;
	left: 20px;
	opacity: 0;
}
#flash .box img.f-2-2{
	position: absolute;
	top: 160px;
	left: 20px;
	opacity: 0;
}
#flash .box img.f-2-3{
	position: absolute;
	top: 200px;
	left: 620px;
	opacity: 0;
}
#flash .box img.f-3-1{
	position: absolute;
	top: 0px;
	left: 320px;
	opacity: 0;
	z-index: 3;
}
#flash .box img.f-3-2{
	position: absolute;
	top: 200px;
	left: 320px;
	opacity: 0;
	z-index: 3;
	
}
#flash .box img.f-3-3{
	position: absolute;
	top: 0px;
	left: -500px;
	opacity: 0;
}
#flash .box img.f-4-1{
	position: absolute;
	top: 0px;
	left: -200px;
	opacity: 0;
}
#flash .box img.f-4-2{
	position: absolute;
	top: 80px;
	left: 340px;
	opacity: 0;
	
}
#flash .box img.f-4-3{
	position: absolute;
	top: 220px;
	left:800px;
	opacity: 0;
}

jQuery程序相对比较复杂，要实现点击事件和场景切换的绑定，因为涉及的场景和动作较多，为了优化代码量，这里采用了二维数组存储定位属性

注意到animate()方法的第三个可选参数，也就是动作执行后下一个要执行的动作，此时需要定义一个function()函数，在函数中写入要执行的动作

js文件（jQuery）

$(document).ready(function() {
    //定义_index变量，取值为0-3，代表四个场景的序号
	var _index = 0;
	//定义一个二维数组存储所有的CSS属性，记为arr[4][3],'4'代表一共有四个可切换的场景，'3'代表每个场景存在三个动作效果
    var arr=[[{left: 20,opacity: 1},{left: 20,opacity: 1},{left: 315,opacity: 1}],[{top:50,opacity: 1},{opacity: 1},{top:0,left:420,opacity: 1}],[{top:120,opacity: 1},{opacity: 1},{left:-107,opacity: 1}],[{left:80,opacity: 1},{opacity: 1},{left:340, opacity: 1}]];
	function play(){
			//每个场景的三个动作依次执行，执行时间都为300毫秒
			$('.box').eq(_index).find('img').eq(0).animate(arr[_index][0], 500, function() {
				$('.box').eq(_index).find('img').eq(1).animate(arr[_index][1], 500, function() {
					$('.box').eq(_index).find('img').eq(2).animate(arr[_index][2], 500)
				})
			})
	}
   //程序开始执行时调用一次play()函数，作为起始页面效果
	play();
	//右箭头点击事件
	$('#flash img.btn-r').click(function() {
		//场景序号自增
		_index++;
		if(_index>3)_index=0;
		//由序号_index选定的场景淡入显示，其他场景淡出隐藏
		$('.box').eq(_index).fadeIn().siblings('div').fadeOut();
		$('.box').find('img').removeAttr('style');
	    play();
		
	})
	//左箭头点击事件
	$('#flash img.btn-l').click(function() {
		//场景序号自减
		_index--;
		if(_index<0)_index=3;
		//由序号_index选定的场景淡入显示，其他场景淡出隐藏
		$('.box').eq(_index).fadeIn().siblings('div').fadeOut();
		$('.box').find('img').removeAttr('style');
	    play();
		
	})






})