jquery文字向上间歇及不间断循环滚动效果代码
时间：2022年09月13日
编辑：佚名
jquery是一套JavaScript的库，它简化了使用Javascript进行网页特效开发的一些复杂性，可用于简化事件处理，HTML文档遍历，Ajax交互和动画，以便快速开发网站。它不是一种单独的编程语言，与JavaScript一起工作。使用jquery，将用更少的资源做更多的事情。今天分享两段jquery文字向上间歇及不间断循环滚动效果代码，亲测可用。
jquery文字向上滚动代码
内容向上不间断-停顿滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字不断向上停顿滚动代码</title>
<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">
</head>
<body>
<script type="text/javascript" src="ajaxjs/jquery-1.8.3.min.js?1001"></script>
<div class="dm_join">
<span>申请通过公告：</span>
<div class="demand scrollDemand" style="position: relative;">
<ul style="width: 100%;">
<li>会员ID:183590成功申请保护证书，数字版权DCI:C2018000000000000006828090005****</li>
<li>会员ID:167272成功申请保护证书，数字版权DCI:C2018000000000000006799480005****</li>
<li>会员ID:186647成功申请保护证书，数字版权DCI:C2018000000000000006811030005****</li>
<li>会员ID:174151成功申请保护证书，数字版权DCI:C2018000000000000006827360005****</li>
<li>会员ID:182356成功申请保护证书，数字版权DCI:C2018000000000000006817690005****</li>
<li>会员ID:183590成功申请保护证书，数字版权DCI:C2018000000000000006810390005****</li>
</ul>
</div>
</div>
<script type="text/javascript" src="ajaxjs/jquery.vticker.min.js?1003"></script>
<script>
$(function () {
$(".scrollDemand").vTicker({ showItems: 3, interval: 1000 });
//$(window).scroll(function () {
// var topScroll = $(this).scrollTop();
// if (topScroll <= 500) {
// $(".applyWayContent").find(".topBtn").removeClass("fixedBtn");
// }else if (topScroll > 500 && topScroll <= 890) {
// $(".applyWayContent").find(".topBtn").addClass("fixedBtn");
// } else if (topScroll > 890 && topScroll <= 1720) {
// $(".applyWayContent").find(".topBtn").removeClass("fixedBtn");
// } else {
// $(".applyWayContent").find(".topBtn").addClass("fixedBtn");
// }
//});
});
</script>
</body>
</html>
二、内容向上不间断-循环滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字不断向上滚动代码（兼容火狐）</title>
<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">
</head>
<body>
<div id="tickerContainer">
<dl id="ticker">
<dt class="heading">This is a news title!</dt>
<dd class="text">This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd>
<dt class="heading">News Heading 2</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">News Heading 3</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">News Heading 4</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">This item is long!</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
</div>
<script type="text/javascript" src="ajaxjs/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
//cache the ticker
var ticker = $("#ticker");
//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
//hide the scrollbar
ticker.css("overflow", "hidden");
//animator function
function animator(currentItem) {
//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
//recurse
animator(currentItem.parent().children(":first"));
});
};
//start the ticker
animator(ticker.children(":first"));
//set mouseenter
ticker.mouseenter(function() {
//stop current animation
ticker.children().stop();
});
//set mouseleave
ticker.mouseleave(function() {
//resume animation
animator(ticker.children(":first"));
});
});
</script>
</body>
</html>
这两段代码粘贴进HTML页面即可使用，注意上传目录下的JS文件，代码比较常见，修改也方便，鼠标移至内容上滚动会暂停，一段是不间断向上无限循环滚动代码，另一段是间歇性单行逐条向上滚动代码，也就是每向上翻滚一条，会停顿3秒再继续翻滚下一条，通过CSS控制前端要显示多少内容，需要请下载测试。
jquery文字向上滚动代码
下载地址：
链接: https://pan.baidu.com/s/18DhPWEFVB_--5vl3t2Gbcw 提取码: 7vvg
jquery文字向上滚动代码
内容向上不间断-停顿滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字不断向上停顿滚动代码</title>
<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">
</head>
<body>
<script type="text/javascript" src="ajaxjs/jquery-1.8.3.min.js?1001"></script>
<div class="dm_join">
<span>申请通过公告：</span>
<div class="demand scrollDemand" style="position: relative;">
<ul style="width: 100%;">
<li>会员ID:183590成功申请保护证书，数字版权DCI:C2018000000000000006828090005****</li>
<li>会员ID:167272成功申请保护证书，数字版权DCI:C2018000000000000006799480005****</li>
<li>会员ID:186647成功申请保护证书，数字版权DCI:C2018000000000000006811030005****</li>
<li>会员ID:174151成功申请保护证书，数字版权DCI:C2018000000000000006827360005****</li>
<li>会员ID:182356成功申请保护证书，数字版权DCI:C2018000000000000006817690005****</li>
<li>会员ID:183590成功申请保护证书，数字版权DCI:C2018000000000000006810390005****</li>
</ul>
</div>
</div>
<script type="text/javascript" src="ajaxjs/jquery.vticker.min.js?1003"></script>
<script>
$(function () {
$(".scrollDemand").vTicker({ showItems: 3, interval: 1000 });
//$(window).scroll(function () {
// var topScroll = $(this).scrollTop();
// if (topScroll <= 500) {
// $(".applyWayContent").find(".topBtn").removeClass("fixedBtn");
// }else if (topScroll > 500 && topScroll <= 890) {
// $(".applyWayContent").find(".topBtn").addClass("fixedBtn");
// } else if (topScroll > 890 && topScroll <= 1720) {
// $(".applyWayContent").find(".topBtn").removeClass("fixedBtn");
// } else {
// $(".applyWayContent").find(".topBtn").addClass("fixedBtn");
// }
//});
});
</script>
</body>
</html>
二、内容向上不间断-循环滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery文字不断向上滚动代码（兼容火狐）</title>
<link rel="stylesheet" type="text/css" href="css/lanrenzhijia.css">
</head>
<body>
<div id="tickerContainer">
<dl id="ticker">
<dt class="heading">This is a news title!</dt>
<dd class="text">This is a snippet of the news. It could be the whole news item or it could link to another page containing...</dd>
<dt class="heading">News Heading 2</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">News Heading 3</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">News Heading 4</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
<dt class="heading">This item is long!</dt>
<dd class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dd>
</dl>
</div>
<script type="text/javascript" src="ajaxjs/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function() {
//cache the ticker
var ticker = $("#ticker");
//wrap dt:dd pairs in divs
ticker.children().filter("dt").each(function() {
var dt = $(this),
container = $("<div>");
dt.next().appendTo(container);
dt.prependTo(container);
container.appendTo(ticker);
});
//hide the scrollbar
ticker.css("overflow", "hidden");
//animator function
function animator(currentItem) {
//work out new anim duration
var distance = currentItem.height();
duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.025;
//animate the first child of the ticker
currentItem.animate({ marginTop: -distance }, duration, "linear", function() {
//move current item to the bottom
currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
//recurse
animator(currentItem.parent().children(":first"));
});
};
//start the ticker
animator(ticker.children(":first"));
//set mouseenter
ticker.mouseenter(function() {
//stop current animation
ticker.children().stop();
});
//set mouseleave
ticker.mouseleave(function() {
//resume animation
animator(ticker.children(":first"));
});
});
</script>
</body>
</html>
这两段代码粘贴进HTML页面即可使用，注意上传目录下的JS文件，代码比较常见，修改也方便，鼠标移至内容上滚动会暂停，一段是不间断向上无限循环滚动代码，另一段是间歇性单行逐条向上滚动代码，也就是每向上翻滚一条，会停顿3秒再继续翻滚下一条，通过CSS控制前端要显示多少内容，需要请下载测试。
jquery文字向上滚动代码
下载地址：
链接: https://pan.baidu.com/s/18DhPWEFVB_--5vl3t2Gbcw 提取码: 7vvg
相关文章
猜你需要
