代码改变世界

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

2010-07-09 17:23  微软一点都不软  阅读(510)  评论(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">
                    &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>