リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード

リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。
1. キーコード: javascript:

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

<script type="text/javascript">
var dome = document.getElementById ("dome"); //ノードを取得する
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed=50; //上向き回転の速度を設定する
dome2.innerHTML=dome1.innerHTML; //ノードキーステートメントをコピー
関数moveTop(){
if(dome1.offsetHeight-dome.scrollTop<=0){//コンテンツが初めて循環されたかどうかを判断します
ドームのスクロールトップ=0;
}それ以外{
dome.scrollTop++; //それ以外の場合は上に移動する
}
}
var myFunction=setInterval("moveTop()",speed);//タイマーを設定する
dome.onmouseover=function(){//マウスをエリア内に置くと停止します
クリア間隔(myFunction);
}
dome.onmouseout=関数(){
myFunction=setInterval(移動トップ、速度);
}
</スクリプト>

2. コード例: 完全なコード (実行可能)

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>円形スクロール情報バー</title>
<スタイル タイプ="text/css">
体{
マージン:0px;
パディング:0px;
}
#エクスプレスli{
高さ:25px;
ボーダー下部:破線 1px #999;
行の高さ:20px;
フォントサイズ:12px;
リストスタイル:なし;
}
#ドーム{
高さ:305px;
オーバーフロー:非表示;
上マージン:0px;
}
#ブッククラス{
幅:200px;
高さ:310px;
境界線:3px 実線 #999;
左マージン:自動;
右マージン:自動;
上マージン:70px;
境界線の半径:5px 5px 5px 5px;
ボックスの影:0px 0px 10px 10px #CECED1;
}
#急行{
左マージン:-30px;
右マージン:10px;
マージン下部:0px;
上マージン:0px;
}
#book_class div div ul li a{
テキスト装飾:なし;
色:#333333;
}
#book_class div div ul li a:hover{
テキスト装飾:下線;
}
</スタイル>
</head>
<本文>
<div id="book_class">
<div id="ドーム">
<div id="dome1">
<ul id="エクスプレス">
<li><a href="#">·2010 年度大学院英語シラバスが 25% オフで入荷しました...</a></li>
<li><a href="#">·四大古典(人民文学)の権威ある版...</a></li>
<li><a href="#">·口承史の権威、唐徳剛氏…</a></li>
<li><a href="#">·袁偉民とスポーツ界:真実を語る...</a></li>
<li><a href="#">·近年の台湾:台湾海峡の両岸でセンセーションを巻き起こしている...</a></li>
<li><a href="#">· ベストセラー教材のおすすめ: 50 セットの美しい本...</a></li>
<li><a href="#">·2010 年度版 法学修士課程 75 年度共同試験概要</a></li>
<li><a href="#">· 新刊およびベストセラーのコンピュータ書籍が 25% オフ</a></li>
<li><a href="#">·2009 年の子供たちに人気の本</a></li>
<li><a href="#">·フロイトの厳選作品が 59% オフ</a></li>
<!--------- <li> タグをコピーするだけです------ここではこれ以上書きません---------->
</div>
<div id="dome2"></div>
</div>
</div>
<!---------- HTML が完全に読み込まれないようにするには、以下の JavaScript コードを記述します----------->
<script type="text/javascript">
var ドーム = document.getElementById("ドーム");
var dome1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed=50; //上向き回転の速度を設定する
dome2.innerHTML=dome1.innerHTML; //ノードをコピー
関数moveTop(){
ドーム1のオフセット高さ-ドームのスクロールトップ<=0の場合{
ドームのスクロールトップ=0;
}それ以外{
ドームのスクロールトップ++;
}
}
var myFunction = setInterval("moveTop()",speed);
dome.onmouseover=関数(){
クリア間隔(myFunction);
}
dome.onmouseout=関数(){
myFunction=setInterval(移動トップ、速度);
}
</スクリプト>
</本文>
</html>

3. インターフェースは次のとおりです。

<<:  IE環境では、divの高さはフォントの高さよりも大きくなければならないと規定されています。

>>:  HTML+CSS+JavaScript でシンプルな三目並べゲームを作成する

推薦する

英語: リンクタグはIEでhrefを自動的に補完します

英語: IE では、リンク タグによって href が自動的に補完されます。 Ajax Link T...

CSS スタイルの優先順位とカスケード順序に関する議論

一般的に: [重要なフラグ1つ] > [特別なフラグ4つ] > 宣言順!importan...

CSS でハートを描く 3 つの方法

以下では、CSS を使用してハートの形を描く 3 つの方法を紹介します。実装プロセスは非常にシンプル...

Nginx の Docker インストールの問題とエラー分析

質問: DockerにNginxをインストールするときに次のエラーが発生しました: docker: ...

MySQL で大量のデータ (数千万) を素早く削除するためのいくつかの実用的なソリューションの詳細な説明

著者は最近、仕事でパフォーマンスのボトルネックの問題に遭遇しました。MySQL テーブルには毎日約 ...

CSS で text-align と margin: 0 auto を使用して中央に配置する例コード

CSSでtext-align、margin: 0 autoを使用して中央揃えにするtext-alig...

Ubuntu 18.04 に mysql5.7.23 をインストールするチュートリアル

この記事では、Ubuntu18.04にmysql5.7.23をインストールする具体的な方法を参考まで...

Windows Server 2019 で NAS を構成する方法

序文このチュートリアルでは最新バージョンをインストールします。 NAS は非常に安定して動作するので...

MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...

デザインリファレンス 美しく独創的なブログデザイン

以下にリストされているすべてのブログはオリジナルであり、独自にデザインされています。これらは、他者が...

Vuex のモジュール化と名前空間の例のデモ

1. 目的:コードの保守が容易になり、さまざまなデータの分類が明確になります。 2. store/i...

LinuxにKafkaをインストールする

目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...

Win10 構成 Tomcat 環境変数チュートリアル図

設定する前に、次の操作を行う必要があります。 1. まずjdk bloggerをインストールします。...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...