JavaScript仿flash遮罩动画效果
更新时间：2016年06月15日 09:27:12 作者：逍遥哥
这篇文章主要为大家详细介绍了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程序设计有所帮助。
相关文章
这篇文章主要介绍了JS实现的base64加密解密操作,结合实例形式分析了基于javascript的base64加密与解密函数定义与使用相关操作技巧,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了javascript 设计模式之组合模式原理与应用,结合实例形式分析了javascript组合模式基本概念、原理、应用场景及操作注意事项,需要的朋友可以参考下2020-04-04
泛型是静态类型语言的基本特征，允许将类型作为参数传递给另一个类型、函数、或者其他结构。TypeScript 支持泛型作为将类型安全引入组件的一种方式。这些组件接受参数和返回值，其类型将是不确定的，直到它在代码中被使用2022-10-10
Javascript中return与闭包对大家来说应该都不陌生，下面本文就给大家介绍了Javascript中return的使用与闭包。文中给出了详细的示例代码，对大家的理解和学习具有一定的参考借鉴价值，感兴趣的朋友们下面来一起看看吧。2017-01-01
javascript定时变换图片实例代码，需要的朋友可以参考一下2013-03-03
本篇文章主要介绍了详解weex默认webpack.config.js改造，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
js中document.write和document.writeln的区别
这篇文章主要介绍了js中document.write和document.writeln的区别,需要的朋友可以参考下2018-03-03
这篇文章主要给大家介绍了关于JavaScript如何将时间戳转化为年月日时分秒格式的相关资料,在前端的日常工作当中,时间戳的使用也是不少的,有时后端返回给我们的数据是一个时间戳,我们需要转换成年月日,时分秒的形式展示在页面当中,需要的朋友可以参考下2023-11-11
在开发过程中会经常遇到window.open打开的页面，同时问题出现了如何刷新上层页面呢？本文将详细介绍，需要了解的朋友可以参考下2012-12-12
JavaScript的Number对象的toString()方法
toString()方法可以把Number对象转换成字符串，并返回此字符串，本文给大家介绍JavaScript的Number对象的toString()方法，对javascript对象方法相关知识感兴趣的朋友一起学习吧2015-12-12
最新评论