JavaScript仿flash遮罩动画效果

更新时间：2016年06月15日 09:27:12 作者：逍遥哥

这篇文章主要为大家详细介绍了JavaScript仿flash遮罩动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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程序设计有所帮助。

您可能感兴趣的文章:

window.print()局部打印三种方式(小结)
本文主要介绍了window.print()局部打印三种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
屏蔽鼠标右键、Ctrl+N、Shift+F10、F11、F5刷新、退格键/Alt+ 方向键 →等等，太多了就不一一写来了感兴趣的朋友可以了解下啊，希望本文对你有所帮助
2013-01-01
微信小程序实现图片压缩
这篇文章主要为大家详细介绍了微信小程序实现图片压缩，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12
JS实现图片元素转BASE64编码的简单示例
在Web开发中,我们经常需要将图片转换为Base64格式,以便在不依赖外部资源的情况下直接在HTML中使用,在这篇文章中,我将向您展示如何使用JavaScript将图片元素转BASE64编码,需要的朋友可以参考下
2023-12-12
微信小程序之 catalog 切换实现解析
这篇文章主要介绍了微信小程序之 catalog 切换实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
这篇文章主要给大家介绍了关于Three.js如何用轨迹球插件，也就是trackball增加对模型的交互功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-09-09
非常漂亮的JS+CSS图片幻灯切换特效
放在你的首页比较不错，宽屏图片格式，每张图片平滑飞入切换，鼠标放上自动切换，和FLASH的平滑效果差不多，喜欢的朋友可以收藏下
2013-11-11
利用Math.js解决JS计算小数精度丢失问题
电商系统中订单、库存中有数字等加减乘除算术,下面这篇文章主要给大家介绍了关于利用Math.js解决JS计算小数精度丢失问题的相关资料,mathjs是一个前端在计算上面必定会用到的类库,需要的朋友可以参考下
2022-04-04
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
这篇文章主要介绍了js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别,需要的朋友可以参考下
2015-11-11
JavaScript倒计时定时器和间隔定时器使用详解
这篇文章主要为大家介绍了JavaScript倒计时定时器和间隔定时器使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
2023-05-05

JavaScript仿flash遮罩动画效果

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具