효과를 생성하려면 사진을 클릭하세요

플러그인 코드:

코드 복사 코드는 다음과 같습니다.

 
(함수( $) { 
var defaults = { 
ani: 4, //애니메이션 효과. 1. 모자이크가 중앙으로 모이고, 2. 모자이크의 왼쪽 상단이 모이고, 3. 모자이크가 끌어당겨 사라진다. 4. 제자리 확대 
지연: 3000, //애니메이션 실행 시간
url: "0", //사진 경로
count: [20, 20]//가로 모자이크 개수, 세로 숫자가 너무 많으면 안 됩니다. 그렇지 않으면 계산량이 너무 커서 컴퓨터가 실행할 수 없습니다. 
} 
$.fn.gysMaSaiKe = 함수(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 ) {//Row
littleBoxTop = littleBoxHeight 
for ( var j = 0; j < count[0]; j ) {//각 행에 단일 범위 
 littleBoxLeft = littleBoxWidth; 
html = "" 
} 
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, 불투명도: 0 }, 지연); 
setTimeout(function(){obj.html("");},delay ) 
} 
} 
else if (ani == 2) { //조각은 왼쪽 상단으로 모여서 사라집니다
res = function () { 
objs.animate({ left: 0 , top: 0, opacity: 0 }, setTimeout(function ()); { obj.html(""); }, 지연) 
} 
} 
else if (ani == 3 ) {//당겨서 사라짐
res = function () { 
objs.filter(":even").animate({top:-100,left:-100},delay) 
objs.filter(":odd").animate({ top: -100, left :900}, 지연); setTimeout(function(){obj.html("");},delay) 
} 
 } 
else if (ani == 4) {// 
res = function () { objs.animate({ 높이: 0, 너비: 0 }, 지연);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. 모자이크가 당겨지고 사라집니다. . 제자리에서 축소 
지연: 5000, / /애니메이션 실행 시간
url: "1.jpg" //사진 경로
}) 