zoukankan      html  css  js  c++  java
  • 文字不间断向上滚动javascript+div+ul+li

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

    方案一、

    <!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;
            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">
                        &nbsp;
                    </td>
                    <td class="TDTitle">
                        <asp:LinkButton ID="lnkOperator" runat="server">设置</asp:LinkButton>
                        <asp:Literal ID="ltrTitle" runat="server"></asp:Literal>&nbsp;
                    </td>
                    <td class="TDMore">
                        <asp:Literal ID="ltrMore" runat="server"></asp:Literal>&nbsp;
                    </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>

    滄海一粟
  • 相关阅读:
    v-bind绑定属性
    vue 第二次学习笔记 v-once v-html
    P4428-[BJOI2018]二进制【树状数组,set】
    P5180-[模板]支配树
    《架构之美》阅读笔记一
    Python基础04----条件控制
    Tensorflow2.0笔记33——Keras 来搭建神经网络的“八股”套路
    每周总结
    架构漫谈阅读笔记01
    Tensorflow2.0笔记32——卷积神经网络
  • 原文地址:https://www.cnblogs.com/zhanghaichang/p/1967342.html
Copyright © 2011-2022 走看看