脚本:时间轴的实现
来源:互联网 发布:视频剪辑软件下载 编辑:程序博客网 时间: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文件: 又臭又长的来了。。
- 脚本:时间轴的实现
- 显示时间的js脚本
- 执行脚本实现超时时间控制 ---Process
- iOS时间轴的实现
- iOS时间轴的实现
- Android 时间轴的实现
- Android时间轴的实现
- Android 时间轴的实现
- Android 时间轴的实现
- 在 Rational Functional Tester 测试脚本中实现对时间的控制
- 通过脚本实现从日志文件中提取时间最近的几条记录
- 脚本系统的实现
- 时间脚本
- 使用脚本得到当前的时间函数
- 建立时间维度表的脚本
- 抓SQL执行语句时间的脚本
- 一个计算脚本运行时间的类
- 按照时间删除文件的脚本
- 查看占用某端口的进程
- GCC-3.4.6源代码学习笔记(127)
- 笔试题目
- Java方法 signature
- linux c程序中获取shell脚本输出
- 脚本:时间轴的实现
- Studying note of GCC-3.4.6 source (127)
- 实战exe4j将jar文件生成exe文件
- hdu 1018 Big Number
- eclipse插件——spket安装妹篇(原创)
- 静—软件开发指导文章
- 计数器与定时器
- 26 个 JQuery 使用小技巧(jQuery tips, tricks & solutions)
- 支持QQ