JavaScript仿flash遮罩动画效果
本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title>仿flash遮罩动画</title>
<metaname="keywords"content="">
<metaname="description"content="">
<scriptcharset="utf-8"src="jquery.js"></script>
<stylemedia="screen">
body{margin:0;}
#banner{position:relative;width:858px;height:238px;overflow:hidden;}
</style>
</head>
<body>
<divid="banner">
<ahref="javascript:void(0);"><imgsrc="1.jpg"width="858"height="238"/></a>
</div>
<scripttype="text/javascript">
functionsetMaskingAnimation(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){
varwidthSpeed=parseInt((width/height)*10);
varheightSpeed=10;
var__width=widthSpeed;
var__height=heightSpeed;
}
else{
varwidthSpeed=10;
varheightSpeed=parseInt((height/width)*10);
var__width=widthSpeed;
var__height=heightSpeed;
}
varhander;
//
functiongetPosition(_width,_height,_left,_top){
vardiv1={
"width":_left,
"height":_top,
"left":0,
"top":0
};
vardiv2={
"width":_width,
"height":_top,
"left":_left,
"top":0
};
vardiv3={
"width":width-_left-_width,
"height":_top,
"left":_left+_width,
"top":0
};
vardiv4={
"width":_left,
"height":_height,
"left":0,
"top":_top
};
vardiv5={
"width":_width,
"height":_height,
"left":_left,
"top":_top
};
vardiv6={
"width":width-_left-_width,
"height":_height,
"left":_left+_width,
"top":_top
};
vardiv7={
"width":_left,
"height":height-_top-_height,
"left":0,
"top":_top+_height
};
vardiv8={
"width":_width,
"height":height-_top-_height,
"left":_left,
"top":_top+_height
};
vardiv9={
"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,
};
}
//
functionmtRand(n1,n2){
returnparseInt(Math.random()*(n2-n1+1)+n1);
}
//
functionsetDiv(i,position){
varhas=$(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{
varhtml='<divclass="maskmask{@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);
}
}
//
functionplay(){
__width+=pixel*widthSpeed;
__height+=pixel*heightSpeed;
__left-=pixel*widthSpeed/2;
__top-=pixel*heightSpeed/2;
varposition=getPosition(__width,__height,__left,__top);
for(vari=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程序设计有所帮助。