欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery开发如何实现图片的马赛克消失效果

程序员文章站 2022-06-14 12:01:09
其中的一个效果:   html代码: . 代码如下:

单击图片,产生效果

其中的一个效果:
jQuery开发如何实现图片的马赛克消失效果 
html代码:

. 代码如下:


<h1>单击图片,产生效果</h1>
<p class="box"></p>


插件代码:

. 代码如下:


; (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);


css代码:

. 代码如下:


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


插件的调用:

. 代码如下:


$(function () {
$(".box").gysmasaike({
count: [10, 15], //马赛克水平数量,竖直方向数量;数量不能过多,否则计算量太大,计算机执行不了,导致浏览器卡死
ani: 4, //动画效果.1.马赛克向中间聚拢,2.马赛克左上角聚拢,3.马赛克拉扯消失,4.原地缩小
delay: 5000, //动画执行时间
url: "1.jpg" //图片路径
});
});