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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
js 内存释放问题
Apr 25 Javascript
Jquery调用webService远程访问出错的解决方法
May 21 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
ES6新特性三: Generator(生成器)函数详解
Apr 21 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 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检测图片木马多进制编程实践
2013/04/11 PHP
10个超级有用值得收藏的PHP代码片段
2015/01/22 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
php+croppic.js实现剪切上传图片功能
2018/08/14 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
JavaScript中的跨浏览器事件操作的基本方法整理
2016/05/20 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
基于VSCode调试网页JavaScript代码过程详解
2020/07/20 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
Python探索之ModelForm代码详解
2017/10/26 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
竞聘上岗演讲稿范文
2014/01/10 职场文书
土木工程专业推荐信
2014/02/19 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
请假条怎么写
2014/04/10 职场文书
关于迟到的检讨书
2015/05/06 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
spring boot项目application.properties文件存放及使用介绍
2021/06/30 Java/Android
MySQL派生表联表查询实战过程
2022/03/20 MySQL