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配合css简单实现返回顶部效果
Sep 30 Javascript
javascript常用代码段搜集
Dec 04 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JavaScript创建、读取和删除cookie
Sep 03 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
Dec 02 Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 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/06/18 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
JavaScript 原型学习总结
2010/10/29 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
javascript错误的认识不用关心内存管理
2012/12/15 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
2013/01/11 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
js面向对象的写法
2016/02/19 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
利用vue-router实现二级菜单内容转换
2016/11/30 Javascript
js多个物体运动功能实例分析
2016/12/20 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
2017/11/28 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python使用MONGODB入门实例
2015/05/11 Python
python集合用法实例分析
2015/05/30 Python
简单上手Python中装饰器的使用
2015/07/12 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
python扫描线填充算法详解
2020/02/19 Python
python zip()函数的使用示例
2020/09/23 Python
html5时钟实现代码
2010/10/22 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
护士辞职信模板
2014/01/20 职场文书
胡桃夹子观后感
2015/06/11 职场文书
Oracle中update和select 关联操作
2022/01/18 Oracle
vue使用echarts实现折线图
2022/03/21 Vue.js