脚本：时间轴的实现

神马解说，都是浮云，直接附码。

实例链接：SNDA贴吧

HTML文件：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>example of drag - drop</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="drop.css" type="text/css" />
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="drop.js"></script>
</head>
<body>

<div class="top">
    example of drag - drop
    <div id="printer"></div>
</div>
<div class="containmargin">
<div class="container">
    <ul id="ulContainer">
        <li><div class="item">
            <span class="date">2010年11月04号</span>
            <div class="text">welcome!</div>
            <div class="text">hello, world!</div>
            <div class="text">hello, world!</div>
            <div class="text">hello, world!</div>
        </div></li>
        <li><div class="item">
            <span class="date">2010年11月03号</span>
            <div class="text">welcome!</div>
            <div class="text">hello, hello, world 1!</div>
            <div class="text">hello, hello, world 2!</div>
            <div class="text">hello, hello, world 3!</div>
            <div class="text">hello, hello, world 3!</div>
        </div></li>
    </ul>
</div>
</div>

<div style="display:inline; padding: 20px;">
    <div style="float:left; text-align:right; width: 50px; height:50px; border:solid 1px red;" onclick="manager.MovePrevious();">左</div>
    <div style="float:right; text-align:left; width: 50px; height:50px; border:solid 1px red;" onclick="manager.MoveNext();">右</div>
    <div style="float:left;width: 50px; height:50px; border:solid 1px red;" onclick="manager.ClearAll()">ClearAll</div>
    <div style="float:left;width: 50px; height:50px; border:solid 1px red;" onclick="manager.SetDateAndReload(this.childNodes[0].value);"><input type="text" value="2010-11-05" /></div>
    <div style="clear:both;"></div>
</div>

<div class="bottom">copyright</div>

<script type="text/javascript">
    var manager = new MoveElementManager("ulContainer");
    //manager.ItemWidth = 500;
    manager.ItemBorderWidth = 1;
    manager.MovingShadow = true;
    manager.OnLoadingItems = function(date,params)
    {
        // [{date:'2010-11-11',items:[{k:'',u:'',t:'',i:''}, {}, {}]}, {}, {}, {}]

        var startIndex = params[0];
        var count = params[1];
        var random = "";

// /**
        if (startIndex > 15) return "";

        var strval = "";
        var index = startIndex;
        for (var i=0;i<count;i++)
        {
            strval += ("<li><div class='item'><span class='date'>" + manager.GetDate("yyyy年MM月dd日",index++) + "</span><div class='text'>welcome!</div><div class='text'>hello, world!</div></div></li>");
        }

  manager.ReceiveCompleted(strval, params);
//  */

    };

    manager.OnVisit = function(date,itemIndex)
    {
        manager.Print(itemIndex + "|" + date);
    };

    //manager.Init();
    manager.AutoAdjust();
</script>
</body>
</html>

CSS文件：

body { font-size: 14px; margin: 1px; padding: 0px; border: 0px; } div.top { border:solid 1px #999999; height:100px; } div.bottom { border:solid 1px #999999; height:30px; } div.containmargin { margin: 0px; padding:0px; width:100%;height:239px; overflow:hidden; position:relative;} div.container{width:100%;height:800px; position:absolute;} div.container ul { width: 5000px; height: 200px; margin: 0px; padding: 0px; position:absolute; cursor: default; left:0px; border-left: dotted 1px black; } div.container ul li { width: 400px; height: 200px; margin: 0px; padding: 0px; float:left; border-right: dotted 1px black; } div.container ul li.Actived { border-right: dotted 1px red; } div.container ul li.Actived div.item span.date, div.container ul li.Actived div.item span.dateActived { color:#ff0000; } div.container ul li.Actived div.item span.dateActived { } div.container ul li div.item { position:absolute; width: 400px; height: 239px; } div.container ul li div.item span.date, div.container ul li div.item span.dateActived { position:absolute; z-index: 100; cursor: pointer; display:block; width: 100px; right: -50px; bottom: 0px; text-align