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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
avalonjs制作响应式瀑布流特效
May 06 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
跟我学习javascript的作用域与作用域链
Nov 19 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
angular 用Observable实现异步调用的方法
Dec 27 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php格式文件打开的四种方法
2018/02/24 PHP
JavaScript实现复制功能各浏览器支持情况实测
2013/07/18 Javascript
深入理解Javascript里的依赖注入
2014/03/19 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
简介JavaScript中Math.cos()余弦方法的使用
2015/06/15 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
python logging模块的使用总结
2019/07/09 Python
基于Django静态资源部署404的解决方法
2019/07/28 Python
如何通过命令行进入python
2020/07/06 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
弄清Pytorch显存的分配机制
2020/12/10 Python
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
光声世纪笔试题目
2012/08/25 面试题
服务员自我评价
2014/01/25 职场文书
给校长的建议书500字
2014/05/15 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
单位员工收入证明样本
2014/10/09 职场文书
个人整改方案范文
2014/10/25 职场文书
金秋助学感谢信
2015/01/21 职场文书
个人优缺点总结
2015/02/28 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL