今回は、広告コンテンツのフェードインとフェードアウトを実現するためのjQueryについて、広告コンテンツのフェードインとフェードアウトを実現するための注意事項を紹介します。 、見てみましょう。
1. 効果と機能の説明は、Sina Weibo の画像テキストリストを上下に模倣し、フェードインとフェードアウト、断続的に上下にスクロールします
2. 実装原則: まず、p に 4 つの画像のみを表示できるように設定する必要があります。非常に多くの画像が自動的に非表示になり、画像にアニメーション イベントを追加して、上下のスクロール効果によってコンテンツの画像とテキストを li タグ全体として扱います。スクロールする場合は、p を入力して表示し、最後に p を残します。非表示にする場合は、アニメーション効果全体が完全に実行されるまでの時間を設定します。
3. 実行環境
IE6 IE7 IE8 以降は Firefox および Google Chrome ブラウザーで実装できます
4. すべての画像の圧縮パッケージ用の新しいファイルを作成し、パッケージを解凍してフォルダーに置きます。画像のパッケージはページの下部にありますので、html5で保存する際に既に記述されているのでフォルダ名を変更する必要はありません。ファイルのエンコーディング タイプを (UTF-8 signed ) に変更します。これにより、一部の中国語が正常に表示されるようになります。保存タイプ (T) を (すべてのファイル (*.*)) に変更し、html5 フォルダーと解凍された画像フォルダーを次の場所に置きます。効果は
6. コード
<!DOCTYPE HTML">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<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;
/*让p始终显示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('<p class="spyWrapper" />').parent().css({height : height * limit});
/*控制p在图片消失的时候依然保持同样的高度不会因为p的消失而变化*/
$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
/*通过调用遍历方法获得所有li元素在实现移除的方法*/
function spy(){
/*开始第二个图片从最上方插入的效果*/
var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);
/*插入一个新的p，透明度和高度为零*/
$list.find('> li:last').animate({ opacity : 0}, 1000, function(){
/*通过遍历插入一个动画出现的效果 时间为1秒*/
$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
/* 增加新的第一个p的高度*/
$(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>
<p class="demo">
<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
<p id="sidebar">
<ul class="spy">
<li>
<a href="http://www.jb51.net/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
<h5><a href="http://www.jb51.net/" title="View round">round</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="http://www.jb51.net/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
<h5><a href="http://www.jb51.net/" title="View reflet">reflet</a></h5>
<p class="info">Nov 29th 2008 by neue</p>
</li>
<li>
<a href="http://www.jb51.net/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
<h5><a href="http://www.jb51.net/" 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="http://www.jb51.net/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
<h5><a href="http://www.jb51.net/" title="View Untitled">Untitled</a></h5>
<p class="info">Nov 29th 2008 by mike1052</p>
</li>
<li>
<a href="http://www.jb51.net/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
<h5><a href="http://www.jb51.net/" 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="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
<h5><a href="http://www.jb51.net/" 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="http://www.jb51.net/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
<h5><a href="http://www.jb51.net/" 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="http://www.jb51.net/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
<h5><a href="http://www.jb51.net/" 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="http://www.jb51.net/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
<h5><a href="http://www.jb51.net/" title="View Values of n Blog">Values of n Blog</a></h5>
<p class="info">Nov 29th 2008 by John Doe</p>
</li>
</ul>
</p>
</p>
</body>
</html>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
Json 操作の日付形式 jQuery で ajax を呼び出して非同期を実現する以上がjQuery は広告コンテンツのフェードインおよびフェードアウト効果を実装します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
