您的位置：首页 > Web前端 > JQuery

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

2016-04-08 22:07 661 查看


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

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();

})

})
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery js html css 广告轮播效果
相关文章推荐
新的分享
章节导航