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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
往光标所在位置插入值的js代码
Sep 22 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 Javascript
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
解决webpack+Vue引入iView找不到字体文件的问题
Sep 28 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vscode vue 文件模板的配置方法
Jul 23 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
php smarty模版引擎中变量操作符及使用方法
2009/12/11 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
JavaScript获取GridView选择的行内容
2009/04/14 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
python模块之StringIO使用示例
2015/04/08 Python
python判断windows系统是32位还是64位的方法
2015/05/11 Python
Django的分页器实例(paginator)
2017/12/01 Python
Python模块文件结构代码详解
2018/02/03 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
党员自我评价分享
2013/12/13 职场文书
《再见了,亲人》教学反思
2014/02/26 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
公关活动策划方案
2014/05/25 职场文书
环保口号大全
2014/06/12 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
离婚协议书样本
2015/01/26 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年司法所工作总结
2015/04/27 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
反腐倡廉观后感
2015/06/08 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
MySQL插入数据与查询数据
2022/03/25 MySQL
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers