JavaScript仿flash遮罩动画效果

本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码，供大家参考，具体内容如下
<！DOCTYPE html><html><head><meta charset="utf-8"><title>仿flash遮罩动画</title><meta name="keywords" content=""><meta name="description" content=""><script charset="utf-8" src="jquery.js"></script><style media="screen">body{margin:0;}#banner{position:relative;width:858px;height:238px;overflow:hidden;}</style></head><body><div id="banner"><a href="javascript:void（0）;"><img src="1.jpg" width="858" height="238"/></a></div><script type="text/javascript">function setMaskingAnimation（container,width,height,time,pixel,color）{var __left=mtRand（parseInt（width*0.25）,parseInt（width*0.75））;var __top=mtRand（parseInt（height*0.25）,parseInt（height*0.75））;if（width>=height）{var widthSpeed=parseInt（（width/height）*10）;var heightSpeed=10;var __width=widthSpeed;var __height=heightSpeed;}else{var widthSpeed=10;var heightSpeed=parseInt（（height/width）*10）;var __width=widthSpeed;var __height=heightSpeed;}var hander;//function getPosition（_width,_height,_left,_top）{var div1={"width":_left,"height":_top,"left":0,"top":0};var div2={"width":_width,"height":_top,"left":_left,"top":0};var div3={"width":width-_left-_width,"height":_top,"left":_left+_width,"top":0};var div4={"width":_left,"height":_height,"left":0,"top":_top};var div5={"width":_width,"height":_height,"left":_left,"top":_top};var div6={"width":width-_left-_width,"height":_height,"left":_left+_width,"top":_top};var div7={"width":_left,"height":height-_top-_height,"left":0,"top":_top+_height};var div8={"width":_width,"height":height-_top-_height,"left":_left,"top":_top+_height};var div9={"width":width-_left-_width,"height":height-_top-_height,"left":_left+_width,"top":_top+_height};return {"div1":div1,"div2":div2,"div3":div3,"div4":div4,"div5":div5,"div6":div6,"div7":div7,"div8":div8,"div9":div9,};}//function mtRand（n1,n2）{return parseInt（Math.random（）*（n2-n1+1）+n1）;}//function setDiv（i,position）{var has=$（container）.find（"div.mask"+i）;if（has.length）{has.css（"left",position.left）;has.css（"top",position.top）;has.css（"width",position.width）;has.css（"height",position.height）;}else{var html="<div class="mask mask{@i}" style="position:absolute;left:{@left}px;top:{@top}px;width:{@width}px;height:{@height}px;background-color:{@backgroundColor};"></div>";html=html.replace（"{@i}",i）;html=html.replace（"{@left}",position.left）;html=html.replace（"{@top}",position.top）;html=html.replace（"{@width}",position.width）;html=html.replace（"{@height}",position.height）;if（i==5）{html=html.replace（"{@backgroundColor}","transparent"）;}else{html=html.replace（"{@backgroundColor}",color）;}$（container）.append（html）;}}//function play（）{__width+=pixel*widthSpeed;__height+=pixel*heightSpeed;__left-=pixel*widthSpeed/2;__top-=pixel*heightSpeed/2;var position=getPosition（__width,__height,__left,__top）;for（var i=1;i<=9;i++）{setDiv（i,position["div"+i]）;}if（position.div1.width<=0 && position.div1.height<=0 && position.div9.width<=0 && position.div9.height<=0）{window.clearInterval（hander）;$（container）.find（"div.mask"）.remove（）;}}//hander=window.setInterval（play,time）;} $（function（）{setMaskingAnimation（"#banner",858,238,100,2,"#ff0000"）;//第4个参数和第5个参数分别设置20和2效果会比较好//第5个参数必须是偶数}）;</script></body></html>
以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。