自己写了一个图片的马赛克消失效果(jQuery)
1 ; (function ($) {
2 var defaults = {
3 ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小
4 delay: 3000, //动画执行时间
5 url:"0",//图片路径
6 count: [20, 20]//马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死
7 }
8 $. = function (opt) {
9 opt = $.extend({}, defaults, opt);
10 if(=="0"){alert("没有填写图片路径参数");return;}
11 var obj = $(this);
12 if (("position") == "static") ({ "position": "relative" });
13 ("overflow","hidden");
14 var objWidth = ();
15 var objHeight = ();
16 (function (count,url, obj) {
17 var littleBoxWidth = (objWidth / count[0]);
18 var littleBoxHeight = (objHeight / count[1]);
19 var html = "";
20 var littleBoxLeft = littleBoxWidth * (-1), littleBoxTop = littleBoxHeight * (-1);
21
22 for (var i = 0; i < count[1]; i ) {//行
23 littleBoxTop = littleBoxHeight;
24 for (var j = 0; j < count[0]; j ) {//每一行中的单个span
25 littleBoxLeft = littleBoxWidth;
26 html = "<span style='display:block;position:absolute;left:" littleBoxLeft "px;top:" littleBoxTop "px;width:" littleBoxWidth "px; height:" littleBoxHeight "px; background-image:url(" url ");background-position:" (littleBoxLeft) * (-1) "px " (littleBoxTop) * (-1) "px;'></span>";
27 }
28 littleBoxLeft = littleBoxWidth * (-1);
29 }
30 (html);
31 })(,,obj);
32
33 var animation = function (ani, delay, objs) {
34 var res = function () { }
35 if (ani == 1) {//马赛克向中间聚拢
36 res = function () {
37 ({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay);
38 setTimeout(function(){("");},delay);
39 }
40 }
41 else if (ani == 2) {//碎片向左上角聚拢消失
42 res = function () {
43 ({ left: 0, top: 0, opacity: 0 }, delay); setTimeout(function () { (""); }, delay);
44 }
45 }
46 else if (ani == 3) {//拉扯消失
47 res = function () {
48 (":even").animate({top:-100,left:-100},delay);
49 (":odd").animate({ top: -100, left:900}, delay); setTimeout(function(){("");},delay);
50 }
51 }
52 else if (ani == 4) {//
53 res = function () { ({ height: 0, width: 0 }, delay);setTimeout(function(){("");},delay); }
54 }
55 else {
56 res = function () { ({ height: 0, width: 0 }, delay);setTimeout(function(){("");},delay); }
57 }
58 return res;
59 } (, , ());
60
61 ("click", "span", animation);
62 }
63 })(jQuery);