jquery_jqueryに基づくシームレスループニュースリストプラグイン

1. レンダリング:

ヒント ソース コードのダウンロードhttp://xiazai.jb51.net/201103/yuanma/jquerynewslist.rar
2. jquery ソース コード:

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

(function ($){
$.fn.extend({
newsList:function(options){
var defaults ={
actName:'li', // の数を表示items;
maxShowNum:'6', //表示されるアイテムの最大数;
actNameH:'28', //一度に移動した距離
ulClass:'.ul_news_list', //コピーされたレイヤーのクラス
copyUlClass:'.ul_news_list2', //レイヤー クラスをコピー
autoTime:'1500', //自動実行時間
clickGoUpC:'.go_uplist', //クリック アップclass;
clickDownUpC:' .go_downlist', // クリックダウン class;
goStart:'go_tart',
autoCloss:'flase' // 'flase' の場合、自動実行スイッチ
} ;

options = $.extend(defaults, options);
return this.each(function(){
var o = options;
var counts =1;
var linum = $($(this).find(o.actName),$(this)).size();
var ul_class = $($(this) .find(o.ulClass),$(this ));
var copy_ul_class = $($(this).find(o.copyUlClass),$(this));
var click_go_up_c = $($( this).find(o.clickGoUpC),$ (this));
var click_go_down_C = $($(this).find(o.clickDownUpC),$(this));
var go_start = $( $(this).find(o.goStart) ,$(this));
if(linum > o.maxShowNum){
$(copy_ul_class).html($(ul_class).html()) ;
goStartList();
}
var thiswrap = $($(ul_class).parent(),$(this));
// 関数を自動的に実行しますfunction auto_function(){
if(counts <= linum){
$(ul_class).animate({top:'-=' o.actNameH},o.autoTime); ).animate({top:'-=' o.actNameH},o.autoTime);
カウント ;
}else{
$(ul_class).animate({top:0},0) ;
$(copy_ul_class).animate( {top:0},0);
}
}
// クリックすると上に移動します。 (linum > o.maxShowNum){
$(click_go_up_c).click(function(){
if(counts <= linum){
$(ul_class).animate({top:'- =' o.actNameH},0);
$(copy_ul_class).animate({top:'-=' o.actNameH},0);
カウント ;
$ (ul_class).animate({top:0}, 0);
$(copy_ul_class).animate({top:0},0);
カウント = 1;
}) ;
}
//下に移動する場合はクリックします。
if(linum > o.maxShowNum){
$(click_go_down_C).click(function(){
if(counts >) ; 1){
カウント--;
$(ul_class).animate({top:'-' counts*o.actNameH},0); '-' counts*o.actNameH},0) ;
}else{
$(ul_class).animate({top:0},0); :0},0);
counts = linum 1;
}
//マウスが通過すると開始および停止します。 o.maxShowNum){
$(thiswrap) .hover(function(){
goStopList();
},function(){
goStartList();
}); >}
function goStartList(){
if(o.autoCloss === 'flase'){
go_start = setInterval(auto_function,o.autoTime)
}
}
関数 goStopList(){
clearInterval(go_start )
});
}
}); 🎜>
3. HTML:





コードをコピーします


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

img src="images/newslist/goupbtn.gif" />

1. 唐山、文川、玉樹地震救助活動に参加した救助隊員唐山、文川、玉樹地震救助活動に参加していた/ li> ;

2. モロッコのセラで、ストリートチルドレンのためのストリートチルドレンのための募金活動を行うアーティストたち

3. 昆明警察は最近、「紅興店県」の「興崗」の悪党組織が逮捕されたと報告しました... ;

4. インドのケッシュさんは、子供たちが暴動を起こしていることを知っていましたが、事故で亡くなったときは苦しみました。 ;曽は唐に参加し、救助に参加するために周曲に到着した

5. 明朝の昆明警察は最近、宣店県の暴力団「紅興ギャング」を壊滅させ、...

6. 唐に参加しました。唐に参加しました。

;7. 湖北省武漢の漢口はかつて唐の時代に参加し、二つの川の洪水のピークが通過するのを眺めました ;8.湖北省武漢漢曽は唐時代に参加しました

4 . CSS:

コードをコピーします。

コードは次のとおりです: body { font -family:"Microsoft Yahei",Arial,"Lucida Grande"、Verdana、Lucida; } *{ margin:0;} img { border:0 ;} .clear { clear:both;}

a { color:#000; text-decoration:none;}

a:hover { color:#EC6104; text-decoration:none;}
.undis { 表示:なし;}/*ニュース_リスト*/
.ニュース_リスト_バー { 位置:相対; 幅:168ピクセル; 背景:url(../images/slideshow2/v3_picture6)繰り返し-y;背景色:#F00;}
.ul_news_list,
.ul_news_list2{position:relative; list-style:none;}
.ul_news_list li,
.ul_news_list2 li {line -高さ:28px; 高さ:28px; オーバーフロー:非表示; ホワイトスペース:nowrap; パディング:0 20px;}
.ul_news_list li a,
.ul_news_list2 li a{ ;}
.go_upanddown {位置:絶対; マージン:-20px 0 0 500px;}
.go_upanddown スパン {padding-right:10px;}

関連ラベル：

シームレスなループ

ソース：php.cn

前の記事：DIV を常に画面の中央、左下、左上、右上、右下に配置するための JS CSS コード集_JavaScript スキル 次の記事：Divコードを常に画面中央に表示する(css js)_javascript Tips

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• BlackRock Labels BTC a Unique Diversifier
  2024-09-20 15:51:33
• Internet Computer (ICP) Price Prediction: Will ICP Price Hit $24?
  2024-09-20 15:47:32
• Worldcoin (WLD) Price Prediction 2022-23
  2024-09-20 15:45:32
• 今日投資すべきトップミームコイン
  2024-09-20 15:39:32
• Floki (FLOKI) 価格予測: 刷新されたマーケティングは Floki が 10 月の利益を取り戻すのに役立ちますか?
  2024-09-20 15:38:32
• Next Cryptocurrency to Explode: 5 Coins to Add to Your Watchlist
  2024-09-20 15:27:32
• Dogecoin: From an Internet Meme to a Digital Currency with a Billion-Dollar Market Capitalization
  2024-09-20 15:26:32
• ZChains Unveils a Series of Exciting Updates and Launches to Enhance Its Ecosystem
  2024-09-20 15:12:32
• Apple 版の Little Fox Payment Platform をダウンロードする方法
  2024-09-20 14:53:01
• 初心者がMetaMaskで取引する方法とその利点と欠点
  2024-09-20 14:51:01

最新の問題

PHPのwhileループを使用してIDごとにセクション内のデータをリストするにはどうすればよいですか? これらの列を持つ mysql テーブルがあります: series_id、series_color、product_name 出力では、次のように series_id ごとに 1 つ...

から 2023-11-17 20:03:03

0

1

290

Symfony Mailer を使用して電子メールを送信する Symfony5.4を新規インストールしました。ドキュメントに従って自分の smtp サーバーから電子メールを送信しましたが、機能することができません。そこで、次の構成で http...

から 2023-11-09 21:03:31

0

1

262

ライブワイヤー未定義 LaravelLivewire プロジェクトをサーバーにデプロイするのに問題があります。問題は、livewire.js ファイルにアクセスできず、コンソールに Livewireis...

から 2023-11-09 15:34:23

0

1

233

PHP をインストールして MAMP を使用しているが、「zsh: コマンドが見つかりません: php」エラーが発生する Composer を使用して Google クライアント ライブラリをインストールしようとしましたが、Composer をインストールすることも、コマンド ラインで php を使用...

から 2023-11-09 09:34:56

0

1

281

「配列要素と属性の構造化に v-for ディレクティブを使用する」 オブジェクトの配列を使用する場合、v-for ループで現在のオブジェクトを変数に代入し、そのプロパティを同時に構造解除することは可能ですか?次のようになります: <divv-...

から 2023-11-05 17:37:54

0

1

216

関連トピック

詳細>

• Win7システムで休止状態を設定する方法
• 素数とは何ですか
• 静的 Web ページと動的 Web ページの違い
• erpフリーソフト
• Webページを開けません
• アロー関数と通常の関数の違い
• 配布されるもの
• VBを接続してデータベースにアクセスする方法