单行文字间歇向上滚动，放上光标就停，移开继续滚动。

最新推荐文章于 2021-11-19 17:29:40 发布

转载最新推荐文章于 2021-11-19 17:29:40 发布 · 1.6k 阅读

文章标签：

#web #jQuery

web 专栏收录该内容

30 篇文章

订阅专栏

本博客展示了如何实现单行文字的间歇滚动效果，包括鼠标悬停时停止滚动的功能，通过jQuery轻松实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码介绍：单行文字间歇向上滚动，放上光标就停，移开继续滚动。

效果网址：http://keleyi.com/keleyi/phtml/scroll/index.htm

本效果的简化版：http://keleyi.com/a/bjac/768f469b95b61487.htm

<!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>
<title>单行文字间歇向上滚动，放光标就停，移开继续滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base target="_blank" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>
<style type="text/css">
.scrollDiv {
	height: 25px;/* 必要元素 */
	line-height: 25px;
	border: #ccc 1px solid;
	overflow: hidden;/* 必要元素 */
}
.scrollDiv li {
	height: 25px;
	padding-left: 10px;
}
ul, li {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}
#status_scrollDiv_keleyi_com {
	float: left;
	width: 18px;
	font-weight: bold
}
</style>
</head>
<body>
<h2>jquery特效 单行文字间歇向上滚动，放光标就停，移开继续滚动</h2>
<div id="scrollDiv_keleyi_com" class="scrollDiv">
  <div id="status_scrollDiv_keleyi_com">↑</div>
  <ul>
    <li><a href="http://keleyi.com/a/bjac/532bedbffca1affa.htm">单行文字间歇向上滚动，放光标就停，移开继续滚动</a></li>
    <li><a href="http://keleyi.com/a/bjac/5d7f4ac2efa72d30.htm">菜单滚动至顶部后固定</a></li>
    <li><a href="http://keleyi.com/a/bjac/141932b419e08101.htm">jquery使用ColorBox弹出图片组浏览层</a></li>
    <li><a href="http://keleyi.com/dev/fd9291320daf9360.htm">jquery右下角滑动弹出可关闭重现层</a></li>
    <li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm">jquery清空textarea等输入框</a></li>
    <li><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm">单行文字间歇向上滚动</a></li>
  </ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
    KeleyiScroll("#scrollDiv_keleyi_com", "#status_scrollDiv_keleyi_com");
});

function AutoScroll(obj, statusobj) {
    if ($(statusobj).text() == '↑') {
        $(obj).find("ul:first").animate({
            marginTop: "-25px"
        },
        500,
        function() {
            $(this).css({
                marginTop: "0px"
            }).find("li:first").appendTo(this);
        });
    }
}
function KeleyiScroll(obj, statusobj) {
    setInterval('AutoScroll("' + obj + '","' + statusobj + '")', 3000);
    $(obj).hover(function() {
        $(statusobj).text('=')
    },
    function() {
        $(statusobj).text('↑')
    })
}
</script>
</body>
</html>