脚本:时间轴的实现

来源:互联网 发布:视频剪辑软件下载 编辑:程序博客网 时间:2024/06/07 07:26

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

实例链接: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文件:

js文件: 又臭又长的来了。。

 

原创粉丝点击