自己用jQuery写了一个图片的马赛克消失效果

　　<h1>单击图片,产生效果</h1>

　　<div class="box"></div>

　　; (function ($) {

　　var defaults = {

　　ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小

　　delay: 3000, //动画执行时间

　　url:"0",//图片路径

　　count: [20, 20]//马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死

　　}

　　$.fn.gysMaSaiKe = function (opt) {

　　opt = $.extend({}, defaults, opt);

　　if(opt.url=="0"){alert("没有填写图片路径参数");return;}

　　var obj = $(this);

　　if (obj.css("position") == "static") obj.css({ "position": "relative" });

　　obj.css("overflow","hidden");

　　var objWidth = obj.width();

　　var objHeight = obj.height();

　　(function (count,url, obj) {

　　var littleBoxWidth = Math.floor(objWidth / count[0]);

　　var littleBoxHeight = Math.floor(objHeight / count[1]);

　　var html = "";

　　var littleBoxLeft = littleBoxWidth * (-1), littleBoxTop = littleBoxHeight * (-1);

　　for (var i = 0; i < count[1]; i++) {//行

　　littleBoxTop += littleBoxHeight;

　　for (var j = 0; j < count[0]; j++) {//每一行中的单个span

　　littleBoxLeft += littleBoxWidth;

　　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>";

　　}

　　littleBoxLeft = littleBoxWidth * (-1);

　　}

　　obj.html(html);

　　})(opt.count,opt.url,obj);

　　var animation = function (ani, delay, objs) {

　　var res = function () { }

　　if (ani == 1) {//马赛克向中间聚拢

　　res = function () {

　　objs.animate({ top: objHeight / 2, left: objWidth / 2, opacity: 0 }, delay);

　　setTimeout(function(){obj.html("");},delay);

　　}

　　}

　　else if (ani == 2) {//碎片向左上角聚拢消失

　　res = function () {

　　objs.animate({ left: 0, top: 0, opacity: 0 }, delay); setTimeout(function () { obj.html(""); }, delay);

　　}

　　}

　　else if (ani == 3) {//拉扯消失

　　res = function () {

　　objs.filter(":even").animate({top:-100,left:-100},delay);

　　objs.filter(":odd").animate({ top: -100, left:900}, delay); setTimeout(function(){obj.html("");},delay);

　　}

　　}

　　else if (ani == 4) {//

　　res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html("");},delay); }

　　}

　　else {

　　res = function () { objs.animate({ height: 0, width: 0 }, delay);setTimeout(function(){obj.html("");},delay); }

　　}

　　return res;

　　} (opt.ani, opt.delay, obj.children());

　　obj.on("click", "span", animation);

　　}

　　})(jQuery);

　　.box { width: 1000px; height:600px;}

　　$(function () {

　　$(".box").gysMaSaiKe({

　　count: [10, 15], //马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死

　　ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小

　　delay: 5000, //动画执行时间

　　url: "1.jpg" //图片路径

　　});

　　});