用jQuery编写的图片马赛克的消失
其中一个影响是:HTML代码:
复制代码代码如下所示:
单击图片以产生效果。
插入代码:
复制代码代码如下所示:
({函数);
var默认值= {
1:4。马赛克动画到中间左上角的马赛克2。收集,收集,3。克拉撕裂马赛消失,4。狭窄的地方
延迟:3000 动画执行时间
URL0/映像路径
计数:{ 20, 20 }马赛克水平,垂直方向数;数量不能太多,或者计算量过大,计算机无法执行,导致浏览器卡死亡。
}
美元。fn.gysmasaike =功能(选配){
选择(默认值,扩展名,},选择);
如果(选择为0){警报(不填充图片路径参数);返回;}
var obj = $(this);
如果(obj.css(位置)= =静态(obj,CSS){位置:相对});
Obj.css(溢出
无功objwidth = obj.width();
无功objheight = obj.height();
(函数(计数,URL,obj){
无功littleboxwidth = math.floor(objwidth /计数{ 0 });
无功littleboxheight = math.floor(objheight /计数{ 1 });
var;
无功littleboxleft = littleboxwidth *(1),littleboxtop = littleboxheight *(1);
对于(var i = 0;i <计数{ 1 };i +)行
littleboxtop = littleboxheight;
对于(var j = 0;j <计数{ 0 };j + +)行中的单个跨度
littleboxleft = littleboxwidth;
=;
}
littleboxleft = littleboxwidth *(1);
}
Obj.html(HTML);
})(opt.count,opt.url,obj);
VaR动画=功能(ANI,延迟对象){
函数(){ }
如果(= 1){马赛克到中间集合
函数(){
objs.animate({顶:objheight / 2,左:objwidth / 2,不透明度:0 },延迟);
setTimeout(function(){ obj.html();},延迟);
}
}
否则(如果为2),左角集合上的片段消失。
函数(){
objs.animate({左:0,上:0,不透明度:0 },延迟);setTimeout(函数(){ obj.html();},延迟);
}
}
否则(如果为3),则退出
函数(){
objs.filter(甚至)。动画({顶:100,左:100 },延迟);
objs.filter(:奇)。动画({顶:100,左:900 },延迟);setTimeout(函数(){ obj.html();},延迟);
}
}
否则如果(4){ / /
RES =函数(){ objs.animate({高度:0,宽度:0 },延迟);setTimeout(函数(){ obj.html();} } },延迟);
}
{其他
RES =函数(){ objs.animate({高度:0,宽度:0 },延迟);setTimeout(函数(){ obj.html();} } },延迟);
}
返回水库;
}(opt.ani,opt.delay,obj.children());
Obj.on(单击
}
}(jQuery);
CSS代码:
复制代码代码如下所示:
。箱{宽度:1000px;身高:600px;}
插件的调用:
复制代码代码如下所示:
$(函数(){())
$(箱)。GysMaSaiKe({
计数:{ 10, 15 },垂直级别的数目马赛克,数量,数量不能太多,否则计算量过大,计算机不执行,导致浏览器死亡卡。
1:4。马赛克动画到中间左上角的马赛克2。收集,收集,3。克拉撕裂马赛消失,4。狭窄的地方
延迟:5000 动画执行时间
URL:1
});
});