jQuery réalise l'effet de fondu d'entrée et de sortie de l'image text

Maison

interface Web

js tutoriel

jQuery réalise l'effet de fondu d'entrée et de sortie de l'image text_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:24 PM

jqueryFondu entrant et sortant

Cet exemple explique principalement l'effet de jquery imitant la liste de textes d'images Sina Weibo de haut en bas, en fondu entrant et sortant, en défilement intermittent de haut en bas. Je le partage avec vous pour votre référence. Le contenu spécifique est le suivant

1. Description de l'effet et de la fonction : la liste de textes d'images imitation Sina Weibo apparaît et disparaît en fondu et défile de haut en bas par intermittence

2. Le principe de mise en œuvre est de configurer d'abord le div pour afficher uniquement 4 images. Les images supplémentaires seront automatiquement masquées. Ensuite, ajoutez un événement d'animation aux images afin qu'elles puissent défiler et jouer. L'effet est joué par la balise li. Le contenu, les images et le texte à l'intérieur traitent chaque li dans son ensemble, lors du défilement, ils entrent dans le div et sont affichés lorsqu'ils quittent finalement le div, ils sont masqués. effet d'animation pour fonctionner complètement.

3. Environnement opérationnel

Il peut être implémenté dans IE6 IE7 IE8 et supérieur dans les navigateurs Firefox et Google Chrome

4. Créez un nouveau fichier pour le package compressé de toutes les images, puis décompressez le package et placez-le dans un dossier. Le package compressé des images peut être vu et téléchargé en bas de la page. il n'est pas nécessaire de modifier le nom du dossier car il a déjà été écrit et le chemin dans html5 correspond à

5. Lors de l'enregistrement du fichier html créé, changez le type d'encodage en (UTF-8 avec signature) afin que certains caractères chinois puissent être affichés normalement. Changez le type d'enregistrement (T) en (tous les fichiers (*.*) ), mettez les dossiers html5 et images décompressées dans le même dossier

Rendu :

Code :

<!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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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 réalise l'effet de fondu d'entrée et de sortie de l'image 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>

Ce qui précède est le code permettant à jQuery d'implémenter l'effet de fondu d'entrée et de sortie du texte de l'image. J'espère que cela sera utile à l'apprentissage de chacun.

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Comprendre le moteur JavaScript: détails de l'implémentationApr 17, 2025 am 12:05 AM

Comprendre le fonctionnement du moteur JavaScript en interne est important pour les développeurs car il aide à écrire du code plus efficace et à comprendre les goulots d'étranglement des performances et les stratégies d'optimisation. 1) Le flux de travail du moteur comprend trois étapes: analyse, compilation et exécution; 2) Pendant le processus d'exécution, le moteur effectuera une optimisation dynamique, comme le cache en ligne et les classes cachées; 3) Les meilleures pratiques comprennent l'évitement des variables globales, l'optimisation des boucles, l'utilisation de const et de locations et d'éviter une utilisation excessive des fermetures.

Python vs JavaScript: la courbe d'apprentissage et la facilité d'utilisationApr 16, 2025 am 12:12 AM

Python convient plus aux débutants, avec une courbe d'apprentissage en douceur et une syntaxe concise; JavaScript convient au développement frontal, avec une courbe d'apprentissage abrupte et une syntaxe flexible. 1. La syntaxe Python est intuitive et adaptée à la science des données et au développement back-end. 2. JavaScript est flexible et largement utilisé dans la programmation frontale et côté serveur.

Python vs JavaScript: communauté, bibliothèques et ressourcesApr 15, 2025 am 12:16 AM

Python et JavaScript ont leurs propres avantages et inconvénients en termes de communauté, de bibliothèques et de ressources. 1) La communauté Python est amicale et adaptée aux débutants, mais les ressources de développement frontal ne sont pas aussi riches que JavaScript. 2) Python est puissant dans les bibliothèques de science des données et d'apprentissage automatique, tandis que JavaScript est meilleur dans les bibliothèques et les cadres de développement frontaux. 3) Les deux ont des ressources d'apprentissage riches, mais Python convient pour commencer par des documents officiels, tandis que JavaScript est meilleur avec MDNWEBDOCS. Le choix doit être basé sur les besoins du projet et les intérêts personnels.

De C / C à JavaScript: comment tout cela fonctionneApr 14, 2025 am 12:05 AM

Le passage de C / C à JavaScript nécessite de s'adapter à la frappe dynamique, à la collecte des ordures et à la programmation asynchrone. 1) C / C est un langage dactylographié statiquement qui nécessite une gestion manuelle de la mémoire, tandis que JavaScript est dynamiquement typé et que la collecte des déchets est automatiquement traitée. 2) C / C doit être compilé en code machine, tandis que JavaScript est une langue interprétée. 3) JavaScript introduit des concepts tels que les fermetures, les chaînes de prototypes et la promesse, ce qui améliore la flexibilité et les capacités de programmation asynchrones.

Moteurs JavaScript: comparaison des implémentationsApr 13, 2025 am 12:05 AM

Différents moteurs JavaScript ont des effets différents lors de l'analyse et de l'exécution du code JavaScript, car les principes d'implémentation et les stratégies d'optimisation de chaque moteur diffèrent. 1. Analyse lexicale: convertir le code source en unité lexicale. 2. Analyse de la grammaire: générer un arbre de syntaxe abstrait. 3. Optimisation et compilation: générer du code machine via le compilateur JIT. 4. Exécuter: Exécutez le code machine. Le moteur V8 optimise grâce à une compilation instantanée et à une classe cachée, SpiderMonkey utilise un système d'inférence de type, résultant en différentes performances de performances sur le même code.

Au-delà du navigateur: Javascript dans le monde réelApr 12, 2025 am 12:06 AM

Les applications de JavaScript dans le monde réel incluent la programmation côté serveur, le développement des applications mobiles et le contrôle de l'Internet des objets: 1. La programmation côté serveur est réalisée via Node.js, adaptée au traitement de demande élevé simultané. 2. Le développement d'applications mobiles est effectué par le reactnatif et prend en charge le déploiement multiplateforme. 3. Utilisé pour le contrôle des périphériques IoT via la bibliothèque Johnny-Five, adapté à l'interaction matérielle.

Construire une application SaaS multi-locataire avec next.js (intégration backend)Apr 11, 2025 am 08:23 AM

J'ai construit une application SAAS multi-locataire fonctionnelle (une application EdTech) avec votre outil technologique quotidien et vous pouvez faire de même. Premièrement, qu'est-ce qu'une application SaaS multi-locataire? Les applications saas multi-locataires vous permettent de servir plusieurs clients à partir d'un chant

Comment construire une application SaaS multi-locataire avec Next.js (Frontend Integration)Apr 11, 2025 am 08:22 AM

Cet article démontre l'intégration frontale avec un backend sécurisé par permis, construisant une application fonctionnelle EdTech SaaS en utilisant Next.js. Le frontend récupère les autorisations des utilisateurs pour contrôler la visibilité de l'interface utilisateur et garantit que les demandes d'API adhèrent à la base de rôles

See all articles