jQuery implements the fade-in and fade-out effect of advertising content-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

jQuery implements the fade-in and fade-out effect of advertising content

php中世界最好的语言

Apr 25, 2018 pm 05:50 PM

jquery content fade in

This time I will bring you jQuery to realize the fade-in and fade-out effect of advertising content. What are the precautions for jQuery to realize the fade-in and fade-out of advertising content. The following is a practical case, let’s take a look.

1. Effect and function description imitating Sina Weibo image text list up and down fading in and out intermittent scrolling up and down

2. To implement the principle, you must first set that only 4 images can be displayed in p The pictures that come out will be automatically hidden and then an animation event is added to the pictures so that they can be scrolled and played. The up and down scrolling effect plays the content pictures and text in the li tag. Treat each li as a whole and enter p during scrolling playback. It is displayed inside and hidden when you finally leave p. Set a time for the entire animation effect to run completely.

3. Running environment

IE6 IE7 IE8 and above can be implemented in Firefox and Google Chrome browsers

4. Create a new file for the compressed package of all pictures and then package it The compressed package that is decompressed and put into the folder image can be seen and downloaded at the bottom of the page. After downloading, there is no need to modify the folder name because it has already been written and matches the path in html5

5. Create When saving the html file, change the encoding type to (UTF-8 signed) so that part of the Chinese can be displayed normally. Change the saving type (T) to (all files (*.*)), and decompress the html5 The effect of placing the picture folders in the same folder is

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>

Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks ago By DDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks ago By DDD

Where to find the Crane Control Keycard in Atomfall

3 weeks ago By DDD

Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation

1 months ago By DDD

Roblox: Dead Rails - How To Complete Every Challenge

3 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7628

CakePHP Tutorial

1389

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

141

Related knowledge

How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation Mar 04, 2024 pm 01:50 PM

How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "

How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

How to set up Cheat Engine in Chinese? Cheat Engine setting Chinese method Mar 13, 2024 pm 04:49 PM

CheatEngine is a game editor that can edit and modify the game's memory. However, its default language is non-Chinese, which is inconvenient for many friends. So how to set Chinese in CheatEngine? Today, the editor will give you a detailed introduction to how to set up Chinese in CheatEngine. I hope it can help you. Setting method one: 1. Double-click to open the software and click "edit" in the upper left corner. 2. Then click “settings” in the option list below. 3. In the opened window interface, click "languages" in the left column

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Where to set the download button in Microsoft Edge - How to set the download button in Microsoft Edge Mar 06, 2024 am 11:49 AM

Do you know where to set the download button to display in Microsoft Edge? Below, the editor will bring you the method to set the download button to display in Microsoft Edge. I hope it will be helpful to you. Let’s follow the editor to learn it! Step 1: First open Microsoft Edge Browser, click the [...] logo in the upper right corner, as shown in the figure below. Step 2: Then click [Settings] in the pop-up menu, as shown in the figure below. Step 3: Then click [Appearance] on the left side of the interface, as shown in the figure below. Step 4: Finally, click the button on the right side of [Show Download Button] and it will change from gray to blue, as shown in the figure below. The above is where the editor brings you how to set up the download button in Microsoft Edge.

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

See all articles