説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 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 でシンプルな三目並べゲームを作成する
特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...
序文プロジェクトを .net core に移行した後、 System.Drawing.Commonコ...
背景開発やデバッグには Chrome Dev Tools がよく使用されますが、ページのパフォーマン...
序文WeChat アプレット開発 (ネイティブ wxml、wxcss) で、{{ }} 内で直接メソ...
Docker 公式ドキュメント: https://docs.docker.com/ Docker は...
1.1 nginxインストールパッケージとインストールスクリプトをクライアントにコピーし、スクリプト...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
1. 背景私たちは時々社内研修を行っており、実験環境をよく利用しています。最初はdockerコンテナ...
目次1. カスタム指示1. グローバルカスタム指示を登録する2. グローバルカスタム指示を使用する3...
mysql 8.0.22 winx64のインストールと設定のグラフィックチュートリアルは参考までに、...
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
1. コマンドの紹介watch コマンドは、指定されたコマンドを定期的に実行し、実行結果を全画面に表...
ローカルでコンテナを作成した後、このコンテナに基づいてローカル イメージを作成し、このイメージを D...
Unix/Linux システムの nobody ユーザーとは何ですか? 1. Windows システ...
この記事では、タイムライン効果を実現するためのvue+swiperの具体的なコードを参考までに共有し...