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

dly · 发表于 2011-4-22 02:12:16

方案一、

<!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>

复制代码

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

相关帖子