html5 遮罩动画,JavaScript仿flash遮罩动画效果

最新推荐文章于 2023-09-24 12:34:22 发布

荣耀张大仙mk~~

最新推荐文章于 2023-09-24 12:34:22 发布

阅读量376

点赞数

文章标签： html5 遮罩动画

本文介绍了一种使用HTML和JavaScript实现的仿Flash遮罩动画效果的方法。通过随机位置生成遮罩并逐渐展开的方式，实现了动态展示的效果。适用于网页横幅广告等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仿flash遮罩动画

body{margin:0;}

#banner{position:relative;width:858px;height:238px;overflow:hidden;}

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='

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个参数必须是偶数

});