jQuery를 사용하여 사라지는 그림 모자이크를 작성했습니다. effect_jquery

효과 중 하나:

html 코드:

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

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

플러그인 코드:

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

(함수( $) {
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" //사진 경로
})