リストループスクロールを実現するための 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 でシンプルな三目並べゲームを作成する

推薦する

Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法

特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...

Linux/Docker で System.Drawing.Common を使用する

序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...

Chrome Dev Tools を使用してページのパフォーマンスを分析する方法 (フロントエンドのパフォーマンス最適化)

背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...

{{ }} で関数を直接使用する WeChat アプレットの例

序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...

Nuxt.jsプロジェクトのDockerデプロイメントの実装

Docker 公式ドキュメント: https://docs.docker.com/ Docker は...

Ansible を使用した Nginx のバッチ デプロイのサンプル コード

1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...

nginx がドメイン名アクセス用に設定されている場合にドメイン名の後に 2 つのスラッシュ // が表示される問題の解決方法

最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...

VMwareを使用したPermeateレンジシステムのインストール手順の詳細説明

1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...

Vue 3.0 カスタムディレクティブの使い方

目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...

MySQL 8.0.22 winx64 のインストールと設定のグラフィックチュートリアル

mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...

MySQLの半同期の詳細な説明

目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...

Linuxのwatchコマンドの使用

1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...

Dockerイメージ送信コマンドcommitの動作原理と使い方の詳細な説明

ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...

Unix/Linux システムにおける nobody ユーザーと nologin の詳細な紹介

Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...

Vue+swiperでタイムライン効果を実現

この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...