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

来源：互联网发布：java如何停止一个线程编辑：程序博客网时间：2024/04/27 20:44

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

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

0 0