本文展示了如何使用HTML、CSS和JavaScript实现一个时间轴的滚动效果。通过示例代码，包括HTML布局、CSS样式和JavaScript逻辑，演示了如何创建一个可以左右滑动的时间轴，以及如何处理日期和子项定位。示例中还包含了一个名为MoveElementManager的JavaScript类，用于处理拖拽和自动调整等操作。
神马解说，都是浮云，直接附码。
实例链接：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;" οnclick="manager.MovePrevious();">左</div>
<div style="float:right; text-align:left; width: 50px; height:50px; border:solid 1px red;" οnclick="manager.MoveNext();">右</div>
<div style="float:left;width: 50px; height:50px; border:solid 1px red;" οnclick="manager.ClearAll()">ClearAll</div>
<div style="float:left;width: 50px; height:50px; border:solid 1px red;" οnclick="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文件： 又臭又长的来了。。
最低0.47元/天 解锁文章
2445
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
