zoukankan      html  css  js  c++  java
  • 新闻列表单行滚动(多行显示)简洁向上滚动js效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <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{500px; }
    #div1{height:72px;overflow:hidden;}
    </style>
    </head>
    <body>
    <div class="shell">
    <div id="div1">
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    <a href="http://www.tonjay.com">新闻列表单行滚动js效果和多行滚动js效果</a>
    </div>
    <div>
    <p>修改说明:#div1里的高度(72px)即是你需要显示的行数<br/>
    js里的18即是要滚动的行高;1500即是每次滚动所需要的时间,越大则速度越慢!
    <a href="http://www.tongjunjie.com/js">web前端资源网</a>注!<p/>
    </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:1500);".replace(/#/g,"o.scrollTop")))();
    </script>
    </html>

    独立使用是没有任何问题的,就是放到我的文件应用的时候出现了兼容问题(谷歌浏览器 计时器失效),多半是与我已经引用的js文件出现了冲突,暂时没解决。

  • 相关阅读:
    「NOI2018」 你的名字
    「刷题笔记」杂题
    关于~
    「刷题笔记」网络流
    「考试」联赛模拟40-45,晚间小测4-9
    「考试」联赛模拟36-39,noip晚间小测2-3
    「刷题笔记」莫队
    「考试」CSP-S 2020
    「考试」noip模拟9,11,13
    「刷题笔记」概率与期望
  • 原文地址:https://www.cnblogs.com/youran/p/7975452.html
Copyright © 2011-2022 走看看