首页 > 文章资讯 > 站长教程 > 建站知识 > jquery文字向上间歇及不间断循环滚动效果代码

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

新闻资讯更多

猜你需要