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程序设计有所帮助。
相关文章
WebWork 当然也提供了很友好的拦截器来实现对文件的上传，让我们可以专注与业务逻辑的设计和实现，在实现上传和下载时顺便关注了下框架上传下载的实现2016-02-02
本文通过实例代码给大家介绍了javascript中关于正则表达式的巧妙操作技巧，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-08-08
正则表达式是用于匹配字符串中字符组合的模式,在JavaScript中正则表达式也是对象,这篇文章主要给大家介绍了关于Javascript正则表达式实现输入框验证信息功能的相关资料,需要的朋友可以参考下2024-05-05
众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了JavaScript请求后台数据的几种常用方式,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
下面小编就为大家带来一篇模拟javascript中的sort排序(简单实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了JavaScript 拖拽实例代码的相关资料,需要的朋友可以参考下2016-09-09
本篇文章主要介绍了微信小程序开发之大转盘 仿天猫超市抽奖实例，这里整理了详细的代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
JavaScript中的boolean布尔值使用学习及相关技巧讲解
JavaScript中的boolean布尔值使用学习及相关技巧讲解,特别是Boolean的用法以及适用!!将truthy或falsy值转换为布尔值的用法非常巧妙,需要的朋友可以参考下2016-05-05
本节主要介绍了通过自定义javascript函数传递参数为字符串格式的，用this传递、引号缺省，示例如下2014-07-07
最新评论