JSは、テキストのスクロールダウンの完全な例を実装しています

著者：Eve Cole 更新時間：2025-05-15 13:16:01

この記事では、JSのテキストをスクロールする方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。

コードコピーは次のとおりです。

<！doctype>

<html>

<head>

<Title> JD.comおよびTaobaoリスト</title>

<style>

@charset "utf-8";

@Name：ベース

@Function：ブラウザのデフォルトスタイルをリセットします

/*ユーザー定義の背景色がWebページに影響を与えるのを防ぐ、ユーザーがフォントをカスタマイズできるようにするために追加します*/

html {

色：＃000;背景：#fff;

-webkit-text-size-adjust：100％;

-ms-text-size-adjust：100％;

}

/*内側と外側のマージンは通常、各ブラウザスタイルのパフォーマンス位置を異なって行います*/

ボディ、Div、DL、DT、DD、UL、OL、Li、H1、H2、H3、H4、H5、H6、Pre、Code、Formset、Legend、入力、Textarea、P、Blockquote、Th、TD、HR、Button、Arti

CLE、脇には、詳細、フィギュート、フィギュア、フッター、ヘッダー、hgroup、メニュー、nav、セクション{

マージン：0;パディング：0;

色：＃333;

}

/ * html5タグをリセットするには、js */in createelement（tag）が必要です */

記事はさておき、詳細、フィギュート、フィギュア、フッター、ヘッダー、hgroup、メニュー、nav、セクション{

表示：ブロック;

}

/* HTML5メディアファイルはIMGと一致しています*/

オーディオ、キャンバス、ビデオ{

表示：inline-block;*display：inline;*zoom：1;

}

/*フォーム要素は親フォントを継承しないことに注意してください*/

ボディ、ボタン、入力、select、textarea {

フォント：12px/1.5 Tahoma、arial、// 5b8b // 4f53;

}

入力、select、textarea {

フォントサイズ：100％;

}

/*各テーブルセルのマージンを削除し、そのエッジを重複させます*/

テーブル{

国境崩壊：崩壊;境界面：0;

}

/* IEバグ修正：THはテキストアライグを継承しません*/

th {

テキストアライグ：継承;

}

/*デフォルトの境界を削除*/

フィールドセット、IMG {

ボーダー：0;

}

/* IE6 7 8（Q）バグはインラインパフォーマンスとして表示されます*/

iframe {

表示：ブロック;

}

/* firefoxの下のこの要素の境界を削除*/

abbr、頭字語{

境界線：0; font-variant：normal;

}

/*一貫したdelスタイル*/

del {

テキストデカレーション：ラインスルー;

}

アドレス、キャプション、引用、コード、dfn、em、th、var {

フォントスタイル：通常。

font-weight：500;

}

/ *リストの前にロゴを削除すると、liは継承します */

ol、ul {

リストスタイル：なし;

}

/*アライメントはタイポグラフィの最も重要な要素です。すべてを中心にしないでください*/

キャプション、th {

テキストアライグ：左;

}

/* Yahooから、タイトルをカスタムにし、複数のシステムアプリケーションに適応します*/

H1、H2、H3、H4、H5、H6 {

フォントサイズ：100％;

font-weight：500;

}

Q：前、Q：後{

コンテンツ：'';

}

/* Unified SuperScriptとsubscript*/

sub、sup {

フォントサイズ：75％; Line-Height：0;位置：相対;垂直アライイン：ベースライン;

}

sup {top：-0.5em;}

sub {bottom：-0.25em;}

{

色：＃333;

}

/* Hover Stateの下線を表示するリンクを表示します*/

A：ホバー{

テキスト装置：下線;

色：＃c00;

}

/*デフォルトで下線が表示されず、ページを簡潔に保ちます*/

ins、{

テキスト装置：なし;

}

/* floatをクリーンアップ*/

.fn-clear：後{

可視性：隠された;

表示：ブロック;

フォントサイズ：0;

コンテンツ：" ";

クリア：両方;

高さ：0;

}

.fn-clear {

ズーム：1; / * IE6 IE7の場合 */

}

/*非表示、通常はjsと協力するために使用されます*/

body .fn-hide {

表示：なし;

}

/ *フローティングによって引き起こされるバグを減らすためにインラインを設定 */

.fn-left、.fn-right {

表示：インライン;

}

.fn-left {

フロート：左;

}

.fn-right {

フロート：そうです;

}

#club {width：888px; height：190px; margin：40px auto; border：1px solid #dddddd; border-radius：5px 5px 0px 0px;}

#club .modle {width：443px; height：190px; border-right：1px solid #dddddd; float：left;}

#club .modle_right {border-right：none; float：right;}

#club .modle .modle_title {width：443px; height：29px; line-height：29px; font-size：12px; font-weight：bolange; background：＃f3f3f3;}

#club .modle .modle_titleスパン{padding-left：7px;}

#club .modle .modle_con {width：423px; margin：0 auto; height：160px; overflow：hidden;}

#club .modle .modle_con ul li {border-bottom：1px #ddd dotted; position：relative;}

#club .modle .modle_con .modle_img {width：50px; height：79px; text-align：center;}

#club .modle .modle_con .modle_img img {mign-top：14px;}

#club .modle .modle_con .modle_img i {display：block; wid; width：15px; height：17px; background：url（../ image/buy.png）no-repeat; position：absolute; top：10px; left：60px;}

#club .modle .modle_con .modle_text {width：337px; height：60px; hidden; riden; margin-top：15px; padding-left：8px;}

#club .modle .modle_con .modle_text pa {color：＃005ea7;}

#club .modle .modle_con .modle_text div a {color：＃99999;}

</style>

</head>

<body>

<h2> <span>人気リスト</span> </h2>

<div>

<ul>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

</ul>

</div>

<h2> <span>人気リスト</span> </h2>

<div>

<ul>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###">非常に良い電気ケトル</a> </p>

<div> <a href = "">非常に高速。信号は良好でセットアップが簡単です。最も重要なことは、使用されるトラフィックの量を確認することです</a> </div>

</div>

</li>

</ul>

</div>

</div> <！ - クラブエンド - >

<スクリプト>

$（function（）{

関数scolldown（id、time）{

var liheight = $（ "＃"+id+"ul li"）。height（）;

var time = time || 2500;

setInterval（function（）{

$（ "＃"+id+"ul"）。prepend（$（ "＃"+id+"ul li：last"）。css（ "height"、 "0px"）。

高さ：liheight+"px"

}、"遅い"））;

}、時間）;

}

scolldown（ "modle_left"）;

scolldown（ "modle_right"、3000）;

}）;

</script>

</body>

</html>

この記事がみんなのJavaScriptプログラミングに役立つことを願っています。