JavaScript Imitate flash Mask Animation Effect
- 2021-06-28 11:11:40
- OfStack
The specific implementation code of JavaScript imitating flash mask animation is shared for your reference, which is as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Imitate flash Mask Animation </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");
// No. 4 Parameters and Paragraphs 5 Parameters set individually 20 and 2 Better results
// No. 5 Parameters must be even
});
</script>
</body>
</html>This is the whole content of this article, and I hope it will be helpful for you to learn JavaScript program design.