这篇文章主要为大家详细介绍了 JavaScript 仿 flash 遮罩动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <!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>
来源: http://www.phperz.com/article/17/0306/264865.html