文字不间断向上滚动--javascript+div+ul+li

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

奋斗的小壁虎

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

阅读量1.5k

点赞数

分类专栏： [03]Web前端 [02]ASP.NET 文章标签： div function scroll timer server javascript

本文链接：https://blog.csdn.net/chz_cslg/article/details/5723950

版权

[02]ASP.NET 同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

[03]Web前端

42 篇文章 0 订阅

订阅专栏

如下方案是在项目中用到的，未方便以后用到；就贴出来了，如各位要用，可参考之。如有不当多多指教～～

方案一、

<!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=gb2312" />
    <title>无标题文档</title>
    <style>
        #updates
        {
            padding-left: 20px;
            color: #3d3d31;
            text-align: left;
        }
        #updates ul
        {
            margin: 0;
            padding: 0;
            height: 148px;
            overflow: hidden;
            line-height: 20px;
        }
        #updates h4
        {
            font: bold 12px '宋体';
        }
        #updates ol
        {
            margin: 0;
            padding-left: 32px;
        }
        #updates ol li
        {
            list-style: decimal outside;
        }
    </style>

    <script src="jquery-1.1.3.pack.js"></script>

    <script language="javascript">
        jQuery(function($) {
            var $updates = $('#updates ul');
            var updates = $updates[0];
            var height = $updates.height();
            var max = updates.scrollHeight;
            var timer;

            function scroll() {
                if (updates.scrollTop < max) {
                    updates.scrollTop += 1;
                } else {
                    updates.scrollTop = 1;
                }
                timer = setTimeout(arguments.callee, 40);
            }

            function init() {
                if (height == max) return;
                updates.scrollTop = 0;
                var children = $updates.children();
                var offset = 0;
                for (var i = 0; i < children.length; i++) {
                    var $item = $(children[i]);
                    offset += $item.clone().appendTo($updates).height();
                    if (offset > height) break;
                }
                scroll();

                $updates.hover(function() { clearTimeout(timer); }, function() { scroll(); });

            }

            init();
        });

    </script>

</head>
<body>
    <div id="updates">
        <ul>
            <li>
                <h4>
                    2010.06.24更新</h4>
                <ol>
                    <li>新增圆通快递，韵达快递新模板。</li>
                    <li>新增3个快递单自定义内容模板。</li>
                    <li>新增快递单显示卖家备注，卖家备注信息。</li>
                    <li>新增宝贝盘点更新操作后，仍勾选更新宝贝。</li>
                    <li>新增宝贝更新销售属性同步删除</li>
                </ol>
            </li>
            <li>
                <h4>
                    2010.06.23更新</h4>
                <ol>
                    <li>增加了订单取消操作后状态标识功能</li>
                    <li>修正订单删除同步问题</li>
                    <li>修正自动上下架失败提示</li>
                    <li>修正快递单打印后显示问题</li>
                    <li>修正宝贝入库保存数据出错的问题</li>
                    <li>修正订单更新后未在快递单打印显示</li>
                </ol>
            </li>
            <li>
                <h4>
                    2010.06.03更新</h4>
                <ol>
                    <li>增加快递单中修改宝贝内容功能；</li>
                    <li>修改宝贝预警模块中部分js错误；</li>
                    <li>增加宝贝库存变化记录查询功能；</li>
                    <li>增加了最新同步更新订单模块；</li>
                    <li>增加增量同步淘宝数据功能（测试版）。</li>
                </ol>
            </li>
        </ul>
    </div>
</body>
</html>

方案二、

<style type="text/css">
    #marqueeDiv
    {
        padding-left: 0px;
        color: #3d3d31;
        text-align: center;
        width: 100%;
        text-align: center;
    }
    #marqueeDiv ul
    {
        margin: 0;
        padding: 0;
        height: 200px; /*height: 100%;*/
        overflow: hidden;
        line-height: 20px;
    }
    #marqueeDiv ul li
    {
        list-style-type: none;
        padding-left: 5px;
        padding-top: 2px;
    }
</style>
<div id="tbContainer" runat="server">
    <table id="titleTable" border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr class="TRTitle">
                <td class="TDLeft">
                     
                </td>
                <td class="TDTitle">
                    <asp:linkbutton id="lnkOperator" runat="server">设置</asp:linkbutton>
                    <asp:literal id="ltrTitle" runat="server"></asp:literal>
                     
                </td>
                <td class="TDMore">
                    <asp:literal id="ltrMore" runat="server"></asp:literal>
                     
                </td>
            </tr>
        </tbody>
    </table>
    <div id="marqueeDiv">
        <ul>
            <li>
                <div id="content" runat="server" class="content">
                    <!--此处放要显示的内容-->
                </div>
            </li>
        </ul>
    </div>
</div>

<script src="../../JS/jquery-1.1.3.pack.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
    function marquee() {
        var obj = document.getElementById("marqueeDiv");
        var allHeight = obj.parentNode.parentNode.clientHeight;
        //alert(allHeight);
        var outNodes = obj.parentNode.parentNode.childNodes;
        var otherHeight = 0;
        for (var i = 0; i < outNodes.length; i++) {
            var curId = obj.parentNode.id;
            if (curId != outNodes[i].id) {
                otherHeight += outNodes[i].clientHeight;
            }
        }

        var innerNodes = obj.parentNode.childNodes;
        for (var i = 0; i < innerNodes.length; i++) {
            var curId = obj.id;
            if (curId != innerNodes[i].id) {
                otherHeight += innerNodes[i].clientHeight;
            }
        }
        //alert(allHeight);
        //alert(otherHeight);
        var marqueeHeight = allHeight - otherHeight;
        //alert(marqueeHeight);

        var $updates = $("#marqueeDiv ul");
        $updates.height(marqueeHeight);

        jQuery(function($) {
            var $updates = $("#marqueeDiv ul");
            var updates = $updates[0];
            var height = $updates.height();
            var max = updates.scrollHeight;
            var timer;

            function scroll() {
                if (updates.scrollTop < max) {
                    updates.scrollTop += 1;
                } else {
                    updates.scrollTop = 1;
                }
                timer = setTimeout(arguments.callee, 40);
            }

            function init() {
                if (height == max) return;
                if (height > max) return; //Added by kevin at 2010/06/29 
                updates.scrollTop = 0;
                var children = $updates.children();
                var offset = 0;
                for (var i = 0; i < children.length; i++) {
                    var $item = $(children[i]);
                    offset += $item.clone().appendTo($updates).height();
                    if (offset > height) break;
                }
                scroll();

                $updates.hover(function() { clearTimeout(timer); }, function() { scroll(); });

            }

            init();
        });
    }

    
</script>