JavaScript仿flash遮罩动画效果


Posted in Javascript onJune 15, 2016

本文实例为大家分享了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程序设计有所帮助。

Javascript 相关文章推荐
Prototype的Class.create函数解析
Sep 22 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
理解javascript对象继承
Apr 17 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
jQuery实现表格隔行换色
Sep 01 jQuery
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
游戏开发中如何使用CocosCreator进行音效处理
Apr 14 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 #Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 #Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 #Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 #Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 #Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 #Javascript
JavaScript函数中关于valueOf和toString的理解
Jun 14 #Javascript
You might like
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
PHP初学入门
2006/11/19 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
JQuery中的事件及动画用法实例
2015/01/26 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
前端js文件合并的三种方式推荐
2016/05/19 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
2016/09/18 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
[02:16]深扒TI7聊天轮盘语音出处2
2017/05/11 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
python循环监控远程端口的方法
2015/03/14 Python
使用Python生成url短链接的方法
2015/05/04 Python
python虚拟环境的安装配置图文教程
2017/10/20 Python
用pytorch的nn.Module构造简单全链接层实例
2020/01/14 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
.net开发工程师面试题
2014/02/25 面试题
Java程序员综合测试题
2014/04/25 面试题
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
志愿者活动总结范文
2014/04/26 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书