JQueryプラグイン開発初探査-画像マルチキャスト
9391 ワード
プラグイン開発の構造を熟知した後、自分で少し複雑な小機能を作ってみました:ピクチャマルチキャストプラグイン.
これまで使用していたピクチャマルチキャストプラグインの1つで、性能が高くなく、ページのロード時にすべてのピクチャをロードする必要があるため、速度が遅い.
自分でこのプラグインを作ることで、画像のロードを制御することができ、毎回1枚の画像しかロードされません.もちろん反転の特効は人のきらびやかさがないに違いない.
以前はdivにimgタグを埋め込む方式を試みたが、左右両側のページめくりボタンが並べにくいため、3つのdiv方式を採用し、最も外側に大きなdivがあり、背景画像は写真画像で、そのうち左右に2つの小さなdivがあり、ページめくりボタンが置かれている.
最初は頻繁にスタイルを調整する必要があるため、大きなdivのコードはすべて死んで、デバッグに成功した後、jsの中に置いてappendに行きます.
パラメータには、表示する写真のリストとdivの幅を定義します.
画像のストレッチは比較的新しいCSS属性を使用しました:“background-size”,'100%100%'
核心思想は毎回ランダムにずっと画像を背景にして、ランダムの原則は前の1枚と繰り返さないことです.
以下は完全なjsコードです.
これまで使用していたピクチャマルチキャストプラグインの1つで、性能が高くなく、ページのロード時にすべてのピクチャをロードする必要があるため、速度が遅い.
自分でこのプラグインを作ることで、画像のロードを制御することができ、毎回1枚の画像しかロードされません.もちろん反転の特効は人のきらびやかさがないに違いない.
以前はdivにimgタグを埋め込む方式を試みたが、左右両側のページめくりボタンが並べにくいため、3つのdiv方式を採用し、最も外側に大きなdivがあり、背景画像は写真画像で、そのうち左右に2つの小さなdivがあり、ページめくりボタンが置かれている.
最初は頻繁にスタイルを調整する必要があるため、大きなdivのコードはすべて死んで、デバッグに成功した後、jsの中に置いてappendに行きます.
パラメータには、表示する写真のリストとdivの幅を定義します.
var defaults = {
height: '300px',
width: '1000px',
imgs: ['images/photo/1.JPG', 'images/photo/2.JPG', 'images/photo/3.JPG', 'images/photo/4.JPG', 'images/photo/5.JPG']
};
画像のストレッチは比較的新しいCSS属性を使用しました:“background-size”,'100%100%'
核心思想は毎回ランダムにずっと画像を背景にして、ランダムの原則は前の1枚と繰り返さないことです.
以下は完全なjsコードです.
/***************************************************
* DannyImagesShow
*
* Ver:1.0
* Author:DannyWang
* Date:2013-10-15
*
Example:
var opt = {
height: '500px',
width: '100%',
imgs: ['images/photo/6.JPG', 'images/photo/7.JPG', 'images/photo/8.JPG', 'images/photo/9.JPG']
};
$("#imgDiv").dannyImagesShow(opt);
****************************************************/
(function ($) {
$.fn.dannyImagesShow = function (options) {
//
var defaults = {
height: '300px',
width: '1000px',
imgs: ['images/photo/1.JPG', 'images/photo/2.JPG', 'images/photo/3.JPG', 'images/photo/4.JPG', 'images/photo/5.JPG']
};
// ,
var options = $.extend(defaults, options);
var gNumber=0;
this.each(function () {
var imgDiv = $(this);
imgDiv.css("height", options.height);
imgDiv.css("width", options.width);
imgDiv.css("background-image", 'url("' + options.imgs[1] + '")');
imgDiv.css("background-position", 'center');
imgDiv.css("background-size", '100% 100%');
var pagerHTML = '';
pagerHTML += '<div id="leftbar" style="float: left; height: ' + (options.height.replace('px', '') - (options.height.replace('px', '') / 2 - 15)) + 'px' + '; width: 30px; padding-left:10px; padding-top: ' + (options.height.replace('px', '') / 2 - 15) + 'px' + ';">';
pagerHTML += '<a id="leftbarButton" class="left">prev</a>';
pagerHTML += '</div>';
pagerHTML += '<div id="rightbar" style="float: right; height: ' + (options.height.replace('px', '') - (options.height.replace('px', '') / 2 - 15)) + 'px' + '; width: 30px;padding-right:10px; padding-top: ' + (options.height.replace('px', '') / 2 - 15) + 'px' + ';">';
pagerHTML += '<a id="rightbarButton" class="right">next</a>';
pagerHTML += '</div>';
imgDiv.append(pagerHTML);
var btnPrev = $(".left");
var btnNext = $(".right");
btnPrev.click(function () {
var n = getImagesNum(1, options.imgs.length);
while (n === gNumber) {
n = getImagesNum(1, options.imgs.length);
}
gNumber = n;
$("#imgDiv").hide();
imgDiv.css("background-image", 'url("' + options.imgs[n - 1] + '")');
$("#imgDiv").slideDown();
});
btnNext.click(function () {
var n = getImagesNum(1, options.imgs.length);
while (n === gNumber) {
n = getImagesNum(1, options.imgs.length);
}
gNumber = n;
$("#imgDiv").hide();
imgDiv.css("background-image", 'url("' + options.imgs[n - 1] + '")');
$("#imgDiv").slideDown();
});
$("#leftbar").bind("mouseover", function () {
$("#leftbarButton").show();
});
$("#leftbar").bind("mouseout", function () {
$("#leftbarButton").hide();
});
$("#rightbar").bind("mouseover", function () {
$("#rightbarButton").show();
});
$("#rightbar").bind("mouseout", function () {
$("#rightbarButton").hide();
});
$(".left").hide();
$(".right").hide();
});
//
var getImagesNum = function (under, over) {
switch (arguments.length) {
case 1: return parseInt(Math.random() * under + 1);
case 2: return parseInt(Math.random() * (over - under + 1) + under);
default: return 0;
}
}
}
})(jQuery);