jQueryを使ってモザイクが消える画像を書いてみたeffect_jquery

エフェクトの 1 つ:

html コード:

コードをコピー コードは次のとおりです:

プラグイン コード:




コードをコピー


コードは次のとおりです。


(関数 ( $) {
var defaults = {
ani: 4, //アニメーション効果 1. モザイクが中央に向かって集まる、2. モザイクの左上隅が集まる、3. モザイクが引っ張られて消える、 4. 所定の位置にズームします
遅延: 3000, //アニメーション実行時間
url: "0", //画像パス
カウント: [20, 20]//水平方向のモザイク数、垂直方向のモザイク数数値; 数値が多すぎると、計算量が大きすぎてコンピュータが実行できなくなります。
}
$.fn.gysMaSaiKe = function (opt) {
opt = $.extend({}, デフォルト, opt);
if(opt.url== "0"){alert("画像パスパラメータが入力されていません");return;}
var obj = $(this);
if (obj.css("position") == "static") obj .css({ "position": "relative" }); ","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 littleBoxTop = littleBoxHeight; var j = 0; j < count[0]; j ) {//各行の単一のスパン
littleBoxLeft =
html = "";
littleBoxLeft = littleBoxWidth * (-1); .html(html);
})(opt.count,opt.url,obj);

var アニメーション = 関数 (ani、遅延、objs) {
var res = 関数 () { }
if (ani == 1) {//モザイクは中央に向かって集まります
res = function ( ) {
objs.animate({ 上: objHeight / 2, 左: objWidth / 2,不透明度: 0 }, 遅延);
setTimeout(function(){obj.html("");},遅延 );
}
}
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({上:-100,左:-100},遅延);
objs.filter(":奇数").animate({上:-100,左) :900}, 遅延); setTimeout(function(){obj.html("");},遅延);
}
}
else if (ani == 4) {//
res = function () { objs.animate({ 高さ: 0, 幅: 0 }, 遅延);setTimeout(function(){obj.html ("");},遅延) }
}
else {
res = function () { objs.animate({ 高さ: 0, 幅: 0 }, 遅延);setTimeout(function( ){obj.html("");},遅延); } 🎜>}
return res;
} (opt.ani, opt.lay, obj.children());

obj.on("click", "span", anime);
}

})(jQuery); CSS コード:

コードをコピー

コードは次のとおりです:

.box { width: 1000px; height:600px;} プラグイン呼び出し:

コードをコピーします


コードは次のとおりです:


$(function () {
$(".box")。 gysMaSaiKe({
count: [10, 15], //横方向のモザイクの数と縦方向のモザイクの数。多すぎてもいけません。そうしないと計算量が多すぎてコンピューターが壊れてしまいます。実行できません。ブラウザがフリーズします。
ani: 4, //アニメーション効果。 1. モザイクが中央に向かって集まります。 2. モザイクの左上隅が集まります。 3. モザイクが引っ張られて消えます。 . その場でズームアウトします

遅延: 5000, / /アニメーション実行時間url: "1.jpg" //画像パス});