主页 / 网络编程 /

JavaScript仿flash遮罩动画效果

网络编程 2021-07-04 19:59www.168986.cn编程入门
这篇文章主要为大家详细介绍了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(width0.25),parseInt(width0.75));
  var __=mtRand(parseInt(height0.25),parseInt(height0.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,_){
    var div1={
      "width":_left,
      "height":_,
      "left":0,
      "":0
    };
    var div2={
      "width":_width,
      "height":_,
      "left":_left,
      "":0
    };
    var div3={
      "width":width-_left-_width,
      "height":_,
      "left":_left+_width,
      "":0
    };
    var div4={
      "width":_left,
      "height":_height,
      "left":0,
      "":_
    };
    var div5={
      "width":_width,
      "height":_height,
      "left":_left,
      "":_
    };
    var div6={
      "width":width-_left-_width,
      "height":_height,
      "left":_left+_width,
      "":_
    };
    var div7={
      "width":_left,
      "height":height-_-_height,
      "left":0,
      "":_+_height
    };
    var div8={
      "width":_width,
      "height":height-_-_height,
      "left":_left,
      "":_+_height
    };
    var div9={
      "width":width-_left-_width,
      "height":height-_-_height,
      "left":_left+_width,
      "":_+_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("",position.);
      has.css("width",position.width);
      has.css("height",position.height);
    }
    else{
      var html='<div class="mask mask{@i}" style="position:absolute;left:{@left}px;:{@}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('{@}',position.);
      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+=pixelwidthSpeed;
    __height+=pixelheightSpeed;
    __left-=pixelwidthSpeed/2;
    __-=pixelheightSpeed/2;
    var position=getPosition(__width,__height,__left,__);
    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中apply和call以及bind(推荐) 下一篇：浅析Nodejs npm常用命令

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by