自下而上滚动公告栏（可悬停）

Posted shark1100913

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自下而上滚动公告栏（可悬停）相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文字公告滚动轮播-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
* {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}
.news {
    height:35px;
    background:#fff;
    overflow:hidden;
}
.news .t_news {
    height:20px;
    color:#2a2a2a;
    margin-top:15px;
    overflow:hidden;
    position:relative;
    width:500px;
}
.news .news_li,.swap {
    line-height:20px;
    display:inline-block;
    position:absolute;
    top:0;
    right:0;
    font-size:14px;
    text-align:right;
    color:#585858
}
.news .swap {
    top:20px;
}
</style>
</head>
<body>
<div class="news">
    <div class="t_news">
        <ul class="news_li">
            <li>1 我爱北京天安门</li>
            <li>2 我爱北京天安门</li>
            <li>3 我爱北京天安门</li>
            <li>4 我爱北京天安门</li>
            <li>5 我爱北京天安门</li>
        </ul>
        <ul class="swap"></ul>
    </div>
</div>

<script>
$(‘.swap‘).html($(‘.news_li‘).html());
x = $(‘.news_li‘);
y = $(‘.swap‘);
h = $(‘.news_li li‘).length * 20; //20为每个li的高度
var hh = $(‘.news_li li‘).length;
if (hh > 1)
    //setTimeout(b,3000);//滚动间隔时间 现在是3秒
    b();
b();

function b() {
    t = parseInt(x.css(‘top‘));
    //alert(t)
    y.css(‘top‘, ‘20px‘);
    x.animate({
        top: t - 20 + ‘px‘
    }, ‘slow‘); //20为每个li的高度
    if (Math.abs(t) == h - 20) { //20为每个li的高度
        y.animate({
            top: ‘0px‘
        }, ‘slow‘);
        z = x;
        x = y;
        y = z;
    }
    setTimeout(b, 3000); //滚动间隔时间 现在是3秒
}
</script>

</body>
</html>

 

以上是关于自下而上滚动公告栏（可悬停）的主要内容，如果未能解决你的问题，请参考以下文章

收藏|分享前端开发常用代码片段

如何使用 jQuery 在单击和鼠标悬停时使可滚动的 div 滚动

实现公告栏无缝滚动的js代码（转）

marquee|各种文字滚动代码(适用公告)

利用10行js代码实现上下滚动公告效果

没有填充或边距：是啥让我的表格无法获得 100% 的宽度？ & 为啥当鼠标悬停在可滚动的 el 上时滚动条不随滚轮滚动？