jQueryで画像のフェードイン・フェードアウト効果を実現 text

ホームページ

ウェブフロントエンド

jsチュートリアル

jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:24 PM

jqueryフェードインとフェードアウト

この例では主に、Sina Weibo の画像テキストリストを上下にフェードインおよびフェードアウトする断続的なスクロールを模倣する効果を説明します。具体的な内容は次のとおりです。

1. 効果と機能の説明: Sina Weibo の画像テキストリストを模倣し、断続的に上下にスクロールします。

2. 実装の原則は、最初に 4 つの画像のみを表示するように div を設定し、その後、画像を上下にスクロールできるようにアニメーションイベントを追加します。エフェクトは li タグによって再生され、各 li は全体として扱われ、それらは div に入り、最終的に div から出るときに表示されます。アニメーション効果が完全に実行されます。

実行環境

Firefox および Google Chrome ブラウザーの IE6 IE7 IE8 以降で実装できます

4. すべての画像の圧縮パッケージ用の新しいファイルを作成し、パッケージを解凍してフォルダーに配置します。ダウンロード後、画像の圧縮パッケージが表示され、ダウンロードできます。フォルダー名はすでに書き込まれており、html5 内のパスは

と一致するため、変更する必要はありません。

5. 作成したhtmlファイルを保存する際、一部の漢字が正常に表示されるようにエンコードタイプを(署名付きUTF-8)に変更します。保存タイプ(T)を(すべてのファイル(*.*))に変更します。 )、html5フォルダーと解凍した画像フォルダーを同じフォルダーに置きます

レンダリング:

コード:

<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){
 $.fn.simpleSpy = function (limit, interval){
  limit = limit || 4;
  /*让div始终显示4个单位的高度*/
  interval = interval || 4000;
  /*控制每个动画效果的时间4000毫秒就是4秒 从最下面的图片消失到第5张图片的从上面显示出来一个动画2秒一共4秒的时间*/
  return this.each(function(){
   var $list = $(this),
   /*获得所有列表项目的缓存*/
   items = [],
   /*未初始化*/
   currentItem = limit,
   total = 0,
   /*初始化以后*/
   height = $list.find('> li:first').height();
   /*列表限制li元素*/
   $list.find('> li').each(function(){
   /*获得缓存*/
    items.push('<li>' + $(this).html() + '</li>');
    /*获得所有列表的li里面的缓存*/
   });
 
   total = items.length;
   /*始终显示在缓存里的li*/
 
   $list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});
   /*控制div在图片消失的时候依然保持同样的高度不会因为div的消失而变化*/
 
   $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
   /*通过调用遍历方法获得所有li元素在实现移除的方法*/
   
   function spy(){
   /*开始第二个图片从最上方插入的效果*/
    var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
    /*插入一个新的div，透明度和高度为零*/
 
    $list.find('> li:last').animate({ opacity : 0}, 1000, function(){
    /*通过遍历插入一个动画出现的效果 时间为1秒*/
     $insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
     /* 增加新的第一个div的高度*/
     $(this).remove(); 
     /*这个移除的效果是什么呢 就是在当我们第一次加载完页面的时候都会有几个只有图片没有属性值的li 清除就是在第一个动画结束后把没有属性的li给删除掉 没有属性的就是 没有高的 没有动画效果的li*/
    });
 
    currentItem++;
    /*永远在第一个li位置显示出现的是下一个li图片*/
    if(currentItem >= total){
    /*如果4张图片大于或等于所有的大于或等于整个图片的的话*/
     currentItem = 0;
     /*那么就从0开始*/
    }
    setTimeout(spy, interval)
    /*在ul和4秒内完成*/
   }
 
   spy();
   /*效果的整个开关*/
  });
 }; 
})(jQuery);
</script>
 
<script type="text/javascript">
$(document).ready(function(){
 $('ul.spy').simpleSpy();
 /*ul.spy调用simpleSpy()模版方法*/
});
</script>
 
</head>
<body>
 
<div class="demo">
 
 <h2 id="jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动">jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
 
 <div id="sidebar">
  <ul class="spy">
   <li>
    <a href="#" title="View round"><img  src="/static/imghwm/default1.png"  data-src="images/1.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-htt-title-View-round-round-a"><a href="htt#" title="View round">round</a></h5>
    <p class="info">Nov 29th 2008 by neue</p>
   </li>
   <li>
    <a href="#" title="View reflet"><img  src="/static/imghwm/default1.png"  data-src="images/2.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-reflet-reflet-a"><a href="#" title="View reflet">reflet</a></h5>
    <p class="info">Nov 29th 2008 by neue</p>
   </li>
   <li>
    <a href="#" title="View Kate Moross Little Big Planet"><img  src="/static/imghwm/default1.png"  data-src="images/3.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Kate-Moross-Little-Big-Planet-Kate-Moross-Little-Big-Planet-a"><a href="#" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
    <p class="info">Nov 29th 2008 by neue</p>
   </li>
   <li>
    <a href="#" title="View Untitled"><img  src="/static/imghwm/default1.png"  data-src="images/4.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Untitled-Untitled-a"><a href="#" title="View Untitled">Untitled</a></h5>
    <p class="info">Nov 29th 2008 by mike1052</p>
   </li>
   <li>
    <a href="#" title="View My Tutorial's Library"><img  src="/static/imghwm/default1.png"  data-src="images/5.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-My-Tutorial-s-Library-My-Tutorial-s-Library-a"><a href="#" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
    <p class="info">Nov 29th 2008 by FrancescoOnAir</p>
   </li>
   <li>
    <a href="#" title="View Sandy — your free personal email assistant - Log in"><img  src="/static/imghwm/default1.png"  data-src="images/6.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Sandy-your-free-personal-email-assistant-Log-in-Sandy-your-free-a"><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
    <p class="info">Nov 29th 2008 by John Doe</p>
   </li>
   <li>
    <a href="#" title="View Sandy — your free personal email assistant - Log in"><img  src="/static/imghwm/default1.png"  data-src="images/7.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Sandy-your-free-personal-email-assistant-Log-in-Sandy-your-free-a"><a href="#" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
    <p class="info">Nov 29th 2008 by John Doe</p>
   </li>
   <li>
    <a href="#" title="View Sandy — your free personal email assistant"><img  src="/static/imghwm/default1.png"  data-src="images/8.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Sandy-your-free-personal-email-assistant-Sandy-your-free-a"><a href="#" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
    <p class="info">Nov 29th 2008 by John Doe</p>
   </li>
   <li>
    <a href="#" title="View Values of n Blog"><img  src="/static/imghwm/default1.png"  data-src="images/9.png"  class="lazy"     style="max-width:90%"  style="max-width:90%" title="" / alt="jQueryで画像のフェードイン・フェードアウト効果を実現 text_jquery" ></a>
    <h5 id="a-href-title-View-Values-of-n-Blog-Values-of-n-Blog-a"><a href="#" title="View Values of n Blog">Values of n Blog</a></h5>
    <p class="info">Nov 29th 2008 by John Doe</p>
   </li>
  </ul>
 </div>
  
</div>
 
</body>
</html>

上記は、画像テキストのフェードインおよびフェードアウト効果を実装するための jQuery のコードです。皆さんの学習に役立つことを願っています。

声明

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

JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合）Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合）Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。