Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Announcement infinite loop scrolling implementation code based on jQuery_jquery

WBOY
Release： 2016-05-16 17:53:46
Original
1046 people have browsed it

在线演示：http://demo.jb51.net/js/2012/callboard/
jQuery代码

复制代码 代码如下:

//第二版：Newton改造
(function (win){
var callboarTimer;
var callboard = $('#callboard');
var callboardUl = callboard.find('ul');
var callboardLi = callboard.find('li');
var liLen = callboard.find('li').length;
var initHeight = callboardLi.first().outerHeight(true);
win.autoAnimation = function (){
if (liLen <= 1) return;
var self = arguments.callee;
var callboardLiFirst = callboard.find('li').first();
callboardLiFirst.animate({
marginTop:-initHeight
}, 500, function (){
clearTimeout(callboarTimer);
callboardLiFirst.appendTo(callboardUl).css({marginTop:0});
callboarTimer = setTimeout(self, 5000);
});
}
callboard.mouseenter(
function (){
clearTimeout(callboarTimer);
}).mouseleave(function (){
callboarTimer = setTimeout(win.autoAnimation, 5000);
});
}(window));
setTimeout(window.autoAnimation, 5000);

HTML代码：
复制代码 代码如下:




CSS代码：(可根据需求另设)
复制代码 代码如下:

#callboard { height:24px; line-height:24px; overflow:hidden;}
#callboard ul { padding:0;}
#callboard li { padding:0;}

完整演示代码：
复制代码 代码如下:





滚动公告栏











Related labels：
Infinite loop scroll
source：php.cn
Previous article：Detailed explanation of Javascript asynchronous loading (browser loading method in javascript)_javascript skills Next article：The execution process of javascript in the browser (picture and text)_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
The query and formula form the entire table, with new columns, where the new columns are formulas involving other conditional column values EDIT: The formula should be the "value" column - the "value" column wi...
From 2024-04-06 21:23:40
0
2
530
Trouble getting specific statistics (Stats) from PokeAPI using Axios and Node.js I have a problem, I'm trying to use the PokemonAPI, but when I try to access the attack, H...
From 2024-04-06 18:46:35
0
1
464
Top-level method to replace a string with HTML code (generated from an array) Given a string like this...$htmlPattern="Usernameis:#name#andusercompanyis#company#&q...
From 2024-04-06 17:40:41
0
2
410
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
How to solve the problem of creating a React application? [closed] Actually I added npxcreate-react-appmy-app so while creating my React app I got an error i...
From 2024-04-05 12:46:17
0
1
412
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template