JS实现新闻公告文字自动滚动

最新推荐文章于 2022-09-17 18:03:52 发布

xyl_hq

最新推荐文章于 2022-09-17 18:03:52 发布

阅读量829

点赞数

分类专栏： js小笔记文章标签： js 自动滚动新闻公告

本文链接：https://blog.csdn.net/xiaxia_Lin/article/details/95603771

版权

js小笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻列表单行滚动js效果和多行滚动js效果，超简洁</title>
    <style>
        a{display:block;line-height:18px;text-decoration:none;color:#f00;font-family:Arial;font-size:12px;}
        a:hover{text-decoration:underline;}
        .shell{width:500px; }
        #div1{height:18px;overflow:hidden;}
    </style>
</head>
<body>
<div class="shell">
    <div id="div1">
        <a href="http://www.tonjay.com">新闻题目1</a>
        <a href="http://www.tonjay.com">新闻题目2</a>
        <a href="http://www.tonjay.com">新闻题目3</a>
        <a href="http://www.tonjay.com">新闻题目4</a>

    </div>
    <div>
        <p>修改说明：#div1里的高度（18px）即是你需要显示的行数<br/>
            js里的18即是要滚动的行高；1500即是每次滚动所需要的时间，越大则速度越慢！
            <a href="http://www.tongjunjie.com/js">web前端资源网</a>注！<p/>
    </div>
</div>
</body>
<script>
    var c,_=Function;
    with(o=document.getElementById("div1")){ innerHTML+=innerHTML; onmouseover=_("c=1"); onmouseout=_("c=0");}
    (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:1000);".replace(/#/g,"o.scrollTop")))();
</script>
</html>

xyl_hq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现新闻公告文字自动滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head> <meta http-equiv="Content-Type" content="t...
复制链接

扫一扫