jQuery réalise l'effet de fondu d'entrée et de sortie du contenu publicitaire-js tutoriel-php.cn

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

<!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(&#39;> li:first&#39;).height();
            /*列表限制li元素*/
            $list.find(&#39;> li&#39;).each(function(){
            /*获得缓存*/
                items.push(&#39;<li>&#39; + $(this).html() + &#39;</li>&#39;);
                /*获得所有列表的li里面的缓存*/
            });
            total = items.length;
            /*始终显示在缓存里的li*/
            $list.wrap(&#39;<p class="spyWrapper" />&#39;).parent().css({height : height * limit});
            /*控制p在图片消失的时候依然保持同样的高度不会因为p的消失而变化*/
            $list.find(&#39;> li&#39;).filter(&#39;:gt(&#39; + (limit - 1) + &#39;)&#39;).remove();
            /*通过调用遍历方法获得所有li元素在实现移除的方法*/
            function spy(){
            /*开始第二个图片从最上方插入的效果*/
                var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : &#39;none&#39;}).prependTo($list);
                /*插入一个新的p，透明度和高度为零*/
                $list.find(&#39;> li:last&#39;).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(){
    $(&#39;ul.spy&#39;).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&#39;s Library"><img width="70" height="70" src="images/5.png" title="" /></a>
                <h5><a href="http://www.jb51.net/" title="View My Tutorial&#39;s Library">My Tutorial&#39;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>

Copier après la connexion

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!