ホームページ >ウェブフロントエンド >jsチュートリアル >jqueryの複数行スクロールコード（詳細説明付き）_jquery

jqueryの複数行スクロールコード（詳細説明付き）_jquery

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

复制代代码如下:

無标题文档

多行滚動演示：

これは公告标题の第 1 回目です

これは公告标题の 2 番目の行です

これは公告标题の第3行

これは公告标题の第 4 行目です

これは公告标题の第二次元

これは公告标题の第六行目です

これは公告标题の第七行

これは公告标题の第八行

下

上
件

このコードは単なる複数行のスクロールです。

1.まず、

の高さ制限は 100 ピクセルで、各行は合計 4 行しか表示できませんが、div には 8 行あります。どうやって表示するのでしょうか？

scrollDiv 属性に overflow:hidden があり、表示できない場合は非表示になります。

2. 2 番目の質問は、

にどの 4 行が表示されるかです。これは、 _this.find("li:first").appendTo(_this); が最初の 4 行を切り取って後ろに挿入するためです。最初の 4 行のみが表示されるように、高さを 0 から開始するように設定します。 _this.find("li:last").show().prependTo(_this); 同様に、次の 4 行を先頭に挿入します。

3. 3問目はアニメーション効果を生み出すjqueryの機能であるanimateです。しかし、_btnDown.unbind("click",scrollDown); なぜバインドされた後にバインドを解除する必要があるのでしょうか?これは、下をクリックすると、scrollDown 関数が実行されるため、実行が内部に進むと、この時点で下をクリックしたときに再度スクロールダウン関数が実行されないようにする必要があり、混乱が生じるためです。スクロールが完了しました。

4.クリックしなくても自動的にスクロールします。そのときは _this.hover(autoStop,autoPlay).mouseout(); があったので、jQuery の hover メソッドは非常によく使われるメソッドで、最初のパラメータはマウスのときです。オブジェクトに移動するとトリガーされるイベント。2 番目のパラメーターは、マウスがオブジェクトの外に移動したときにトリガーされるイベントです。
5. $("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn2",down:"btn1"}); Scroll を呼び出して実行しました: function(opt,callback) 、ここでは opt のみが渡され、コールバック関数はありません。そしてパラメータを渡すのも非常に奇妙です。ただし、オブジェクトに相当するこのように渡すことができると考えてください。

Paizhuan についてもっと知りたいです。

声明：

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

前の記事：高パフォーマンスの WEB 開発。Flush はページをチャンクに分割し、段階的にレンダリングします。Flush は、ページをステップごとに分割してレンダリングします。次の記事：高パフォーマンスの WEB 開発。Flush はページをチャンクに分割し、段階的にレンダリングします。Flush は、ページをステップごとに分割してレンダリングします。

続きを見る

jqueryの複数行スクロールコード（詳細説明付き）_jquery

関連記事