少し前に、画像の前と次のリンク の効果についての記事を書きました。その後、jquery プラグイン パッケージを見て、この例を使用しました。例
カプセル化された JS ソース コード:
/*
* imageupdown 1.0
* Copyright (c) 2009
* 日付: 2010-04-20
* 画像を前後に移動する特殊効果
*/
(function($){
$.fn.imageupdown = function(options){
var defaults = {
upCursor:"pre.cur",
upTitle:"クリックすると、前の画像",
upUrl: $(this).attr('left'),
downCursor:"next.cur",
downTitle:"クリックして次の画像を表示",
downUrl :$(this).attr('right ')
}
var options = $.extend(defaults, options);
this.each(function(){
var thisImage=$( this);
$(thisImage) .bind("mousemove",function(e){
varpositionX=e.originalEvent.x||e.originalEvent.layerX||0;
if(positionX< ;=$(this).width() /2){
this.style.cursor='url(' options.upCursor '),auto';
$(this).attr('title', '' options.upTitle '');
$(this).parent().attr('href','' options.upUrl '');
}else{
this.style.cursor ='' options.downCursor '';
$(this).attr('title','' options.downTitle '');
$(this).parent().attr('href', '' options.downUrl '');
}
});
}
html ページメソッドの呼び出し:
コードをコピー
コードは次のとおりです:
次のような質問があるかもしれません:
(1) function(e) e は何を意味しますか?
は対応するイベントです。 $().click(function(e) {}); // ここはクリック イベントです
$().focus(function(e) {}); // ここはフォーカス イベントです