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 相关文章推荐
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
原生js 封装get ,post, delete 请求的实例
Aug 11 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
详解React native全局变量的使用(跨组件的通信)
Sep 07 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 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 网页播放器用来播放在线视频的代码(自动判断并选择视频文件类型)
2010/06/03 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
js利用prototype调用Array的slice方法示例
2014/06/09 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
javascript超过容器后显示省略号效果的方法(兼容一行或者多行)
2016/07/14 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
vue项目中仿element-ui弹框效果的实例代码
2019/04/22 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
2019/05/23 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
python实现用于测试网站访问速率的方法
2015/05/26 Python
python实现类之间的方法互相调用
2018/04/29 Python
Python模拟百度自动输入搜索功能的实例
2019/02/14 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
深入浅析Python 函数注解与匿名函数
2020/02/24 Python
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
《金孔雀轻轻跳》教学反思
2014/04/20 职场文书
团日活动总结怎么写
2014/06/25 职场文书
小学优秀教师先进事迹材料
2014/12/16 职场文书
社区服务活动报告
2015/02/05 职场文书
简爱电影观后感
2015/06/10 职场文书
观后感开头
2015/06/19 职场文书
2019学子的答谢词范本!
2019/07/05 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
深入理解python多线程编程
2021/04/18 Python