ホームページ  >  記事  >  ウェブフロントエンド  >  jqueryピクチャー前次リンク効果(続き)_jquery

jqueryピクチャー前次リンク効果(続き)_jquery

WBOY
WBOYオリジナル
2016-05-16 18:28:591188ブラウズ

少し前に、画像の前と次のリンク の効果についての記事を書きました。その後、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) {}); // ここはフォーカス イベントです
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。