zoukankan      html  css  js  c++  java
  • 滚动读行!

    演示

    单行滚动-Download by http://www.codefans.net

    • 这是公告标题的第一行
    • 这是公告标题的第二行
    • 这是公告标题的第三行
    • 这是公告标题的第四行
    • 这是公告标题的第五行
    • 这是公告标题的第六行
    • 这是公告标题的第七行
    • 这是公告标题的第八行

    代码

    <!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>单行滚动-Download by http://www.codefans.net</title>
    <script type="text/javascript" src="common/jquery132min.js"></script>
    <link type="text/css" rel="stylesheet" href="common/common.css" />
    <style>
    #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
    #scrollDiv li{height:25px;padding-left:10px;}
    </style>
    <script type="text/javascript">
    function AutoScroll(obj){
        $(obj).find("ul:first").animate({
            marginTop:"-25px"
        },1000,function(){
            $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
        });
    }
    $(document).ready(function(){
        setInterval('AutoScroll("#scrollDiv")',3000)
    });
    </script>
    </head>
    <body>
    <div id="scrollDiv">
        <ul>
            <li>这是公告标题的第一行</li>
            <li>这是公告标题的第二行</li>
            <li>这是公告标题的第三行</li>
            <li>这是公告标题的第四行</li>
            <li>这是公告标题的第五行</li>
            <li>这是公告标题的第六行</li>
            <li>这是公告标题的第七行</li>
            <li>这是公告标题的第八行</li>
        </ul>
    </div>
    </body>
    </html>
  • 相关阅读:
    重新理解js的执行环境和闭包
    给开发插上想象力的翅膀
    Vue源码的初始化以及数据驱动逻辑
    解析Vue源码之前
    前端模块化发展介绍和未来展望
    现代前端框架具备的特征分析及Vue、React对比
    始于Flux的单项数据流发展简单介绍
    用面向对象编程解决常见需求场景
    【Docker】之重启容器相关命令
    【Java】之获取CSV文件数据以及获取Excel文件数据
  • 原文地址:https://www.cnblogs.com/banbu/p/2657010.html
Copyright © 2011-2022 走看看