ネイティブ JS はマーキー効果を実装します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

ネイティブ JS はマーキー効果を実装します

高洛峰

Feb 21, 2017 pm 02:51 PM

この記事では主にネイティブJSでマーキー効果を実現するサンプルコードを共有します。非常に優れた参考値です。下のエディターで見てみましょう

効果は次のとおりです: (動的効果はコードをコピーして表示でき、ケース内の画像は自分で追加できます)選択)

ネイティブ JS はマーキー効果を実装します

コードは次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  p{
   position: relative;
   width: 800px;
   height: 200px;
   border: 5px solid lightgreen;
   margin:10px auto;
   overflow: hidden;
  }
  p ul{
   position: absolute;
   left:0;
   top:0;
  }
  p ul li{
   width: 200px;
   height: 200px;
   float: left;
  }
  p ul li img{
   width:100%;
   height: 100%;
  }
 </style>
</head>
<body>
<p id="p1">
 <ul>
  <li><img src="/static/imghw/default1.png"  data-src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b4251f00ef925cba01ed49ca117e14a7"  class="lazy"   alt=""/></li>
  <li><img src="/static/imghw/default1.png"  data-src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d38403825519770211acbf49459ae7d7"  class="lazy"   alt=""/></li>
  <li><img src="/static/imghw/default1.png"  data-src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=53c83d39c62af65db998f4945bacaec2"  class="lazy"   alt=""/></li>
  <li><img src="/static/imghw/default1.png"  data-src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5509f1a642644b40c8aa98c9e2c77a83"  class="lazy"   alt=""/></li>
 </ul>
</p>
<script>
 var oUl=document.getElementsByTagName(&#39;ul&#39;)[0];
 var lis=oUl.getElementsByTagName(&#39;li&#39;);
 oUl.innerHTML+=oUl.innerHTML;
 oUl.style.width=lis.length*lis[0].offsetWidth+&#39;px&#39;;
 var left=null;
 var timer=setInterval(function(){
  left-=3;
  if(left<-oUl.offsetWidth/2){
   left=0;
  }
  oUl.style.left=left+&#39;px&#39;
 },10)
</script>
</body>
</html>

ログイン後にコピー

マーキー効果を実装するネイティブ JS に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

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

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7517

CakePHP チュートリアル

1378

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか？ Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか？ Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

chart.js：パイ、ドーナツ、バブルチャートを始めます Mar 15, 2025 am 09:19 AM

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。パイとリングチャートを作成しますパイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、割合がゼロのエンティティを意味します