其中的一个效果：

超文本标记语言代码： 复制代码代码如下： h1单击图片，产生效果/h1 div class='box'/div插件代码： 复制代码代码如下：（函数($) { var defaults={ ani: 4，//动画效果.1.马赛克向中间聚拢，2.马赛克左上角聚拢，3.马赛克拉扯消失，4.原地缩小delay: 3000，//动画执行时间URL :“0”，//图片路径count: [20，20]//马赛克水平数量，竖直方向数量；数量不能过多，否则计算量太大，计算机执行不了，导致浏览器卡死} $ .fn。gysmasaike=function(opt){ opt=$ .扩展({}，默认值，opt)；if(opt.url=='0'){alert('没有填写图片路径参数');返回；} var obj=$(this)；如果。CSS('位置'=='静态')obj。CSS({ ' position ' : ' relative ' })；obj.css('溢出','隐藏');var objWidth=obj。宽度()；var ObjhThEr=obj。高度()；（函数(计数，url，obj){ var littlebox width=math。地板(objWidth/count[0])；var小盒子高度=数学。楼层(ObjhA8/count[1])；var html=var小箱左=小箱宽*(1)，小箱顶=小箱高*(1)；for(var I=0；我数到[1];i ) {//行小箱顶=小箱高；for(var j=0；j计数[0];j ) {//每一行中的单个跨度小框左=小框宽；html=' span style=' display :块；位置：绝对；left : ' Little box left ' pxtop : ' Little box top ' pxwidth : ' Little box width ' px h8 : ' Little box height ' px；背景图像：网址('网址')；背景-位置： '(littlebox左侧)*(-1)' px '(littlebox顶部)*(-1)' px；/span '；}小方框左=小方框宽*(1)；} obj。html(html)；})(opt.count，opt.url，obj)；var animation=function (ani，delay，objs){ var RES=function(){ } if(ani==1){//马赛克向中间聚拢RES=function(){ objs。动画({ top : ObjhA8/2，left: objWidth/2，opacity: 0 }，延迟)；setTimeout(函数(){ obj。html(')；},延迟);} } else if (ani==2) {//碎片向左上角聚拢消失RES=function(){ objs。animate({ left : 0，top: 0，opacity: 0 }，delay)；setTimeout(函数(){ obj。html(')；},延迟);} } else if (ani==3) {//拉扯消失RES=function(){ objs。过滤器(' :偶数').动画({top:-100，left:-100}，延迟);objs . filter(' :奇数').动画({ top: -100，left:900}，延迟)；setTimeout(函数(){ obj。html(')；},延迟);} } else if(ani==4){//RES=function(){ objs。动画({高度： 0，宽度： 0 }，延迟)；setTimeout(函数(){ obj。html(')；},延迟);} } else { RES=function(){ objs。动画({高度： 0，宽度： 0 }，延迟)；setTimeout(函数(){ obj。html(')；},延迟);} }返回res} (opt.ani，opt.delay，obj。儿童())；obj.on('click '，' span '，动画);} })(jQuery)；钢性铸铁代码： 复制代码代码如下：盒子{宽度： 1000像素高度：600 px} 插件的调用： 复制代码代码如下： $(function () { $(').方框')。gysMaSaiKe({ count: [10，15]，//马赛克水平数量，竖直方向数量；数量不能过多，否则计算量太大，计算机执行不了，导致浏览器卡死ani: 4，//动画效果.1.马赛克向中间聚拢，2.马赛克左上角聚拢，3.马赛克拉扯消失，4.原地缩小delay: 5000，//动画执行时间url: '1.jpg' //图片路径});});