Maison > Article > interface Web > jQuery réalise l'effet de fondu d'entrée et de sortie du contenu publicitaire
jQuery réalise l'effet de fondu d'entrée et de sortie du contenu publicitaire
- php中世界最好的语言original
- 2018-04-25 17:50:071522parcourir
Cette fois, je vais vous présenter jQuery pour implémenter l'effet de fondu d'entrée et de sortie du contenu publicitaire. Quelles sont les précautions pour que jQuery implémente l'effet de fondu d'entrée et de sortie du contenu publicitaire. . Voici un cas pratique, jetons un coup d'œil.
1. Description de l'effet et de la fonction imitant la liste de textes d'images Sina Weibo de haut en bas, fondu entrant et sortant, défilement intermittent de haut en bas
2. Le principe de mise en œuvre doit d'abord définir que seules 4 images peuvent être. affiché dans p Les images qui sortent seront automatiquement masquées, puis un événement d'animation est ajouté aux images afin qu'elles puissent défiler et être lues. L'effet de défilement vers le haut et vers le bas lit le contenu des images et du texte dans la balise li. li dans son ensemble et entrez p pendant la lecture par défilement. Il est affiché à l'intérieur et masqué lorsque vous quittez finalement p. Définissez une heure pour que l'effet d'animation complet s'exécute complètement.
3. Environnement d'exécution
IE6 IE7 IE8 et supérieur peuvent être implémentés dans les navigateurs Firefox et Google Chrome
4. Créez un nouveau fichier compressé pour toutes les images, puis emballez-le. Le package compressé qui est décompressé et placé dans l'image du dossier peut être vu et téléchargé en bas de page. Après le téléchargement, il n'est pas nécessaire de modifier le nom du dossier car il a déjà été écrit et correspond au chemin en html5
5. Créer Lors de l'enregistrement du fichier html, changez le type d'encodage en (signé UTF-8) afin qu'une partie du chinois puisse être affichée normalement. Changez le type d'enregistrement (T) en (tous les fichiers (*.*. )), et décompressez le html5 L'effet de placer les dossiers d'images dans le même dossier 6. Code<!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> Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article .Pour un contenu plus passionnant, veuillez prêter attention aux autres sites Web chinois php Articles connexes ! Lecture recommandée :
Format de date d'opération Json
Appelez ajax dans jQuery pour réaliser une implémentation asynchrone
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript