jQuery简易时光轴实现方法示例
发布时间 - 2026-01-11 00:08:33 点击率：次本文实例讲述了jQuery简易时光轴实现方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>timeLine</title>
<style>
body{
margin: 0;
padding: 0;
background: #e8ffe8;
}
#head, #content, #footer{
width: 1000px;
margin: 0 auto;
}
#head{
text-align: center;
height: 100px;
line-height: 100px;
}
#footer{
clear: both;
text-align: center;
height: 30px;
line-height: 30px;
}
/*-----大标题-----*/
.bigElement{
clear: both;
position: relative;
}
.bigTitle{
font-size: 16px;
font-weight: bold;
height: 70px;
line-height: 70px;
background: #e8ffe8;
color: #635d5a;
}
.bigAction, .bigInfo{
float: left;
}
.bigAction{
border-right: 3px solid #635d5a;
text-align: right;
width: 220px;
}
.bigButtonSeeMore{
float: right;
width: 70px;
height: 70px;
text-align: center;
}
.bigButtonSeeMore > a{
text-decoration: none;
display: block;
color: #635d5a;
outline: none;
blr: expression(this.onFocus=this.blur());
}
.bigButtonSeeMore > a:hover{
color: #8cdbff;
}
.bigContent{
clear: both;
}
/*-----大标题end-----*/
/*-----小标题-----*/
.smallElement{
clear: both;
position: relative;
height: auto;
font-size: 16px;
background: #e8ffe8;
color: #635d5a;
}
.smallTitle{
text-align: right;
width: 220px;
}
.smallTitle, .smallContent{
float: left;
}
.smallContent{
border-left: 3px solid #635d5a;
}
.smallInfo{
margin-top: 20px;
text-indent: 40px;
}
/*-----小标题end-----*/
/*-----三角形-----*/
.bigTitleTrifonIconR{
border-color: #e8ffe8 #e8ffe8 #e8ffe8 #635d5a;
border-style: solid;
border-width: 7px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 28px;
left: 223px;
}
.smallTitleTrifonIconL{
border-color: #e8ffe8 #635d5a #e8ffe8 #e8ffe8;
border-style: solid;
border-width: 6px;
width: 0;
height: 0;
font-size: 0;
position: absolute;
top: 23px;
left: 208px;
}
/*模板*/
.hide{
display: none;
}
/*查看更多*/
.showMore{
clear: both;
text-align: center;
height: 70px;
line-height: 70px;
}
.showMore:hover{
cursor: pointer;
background: #FFEFDB;
color: #8cdbff;
}
</style>
</head>
<body>
<div id='head'>
<span>订单小助手:</span>
<input type='text' id='txtDoccode' />
</div>
<div id='content'>
<div class='timeLine'></div>
<div class='showMore'>查看更多</div>
</div>
<div id='footer'>footer</div>
<!-- 大标题模板 -->
<div class='hide' id='bigTitleTpl'>
<div class='bigElement'>
<div class='bigTitle'>
<div class='bigAction'>{bigAction} </div>
<div class='bigInfo'> {bigInfo}</div>
<div class='bigButtonSeeMore'><a href='javascript:;'>-</a></div>
</div>
<div class='bigTitleTrifonIconR'> </div>
<div class='bigContent'></div>
</div>
</div>
<!-- 详细信息模板 -->
<div class='hide' id='bigContentTpl'>
<div class='smallElement'>
<div class='smallTitle'>
<div class='smallTime'><br/>{smallTime} </div>
</div>
<div class='smallTitleTrifonIconL'> </div>
<div class='smallContent'>
<div class='smallAction'><br/> {smallAction}</div>
<div class='smallInfo'> {smallInfo}</div>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.8.0/jquery.js"></script>
<script>
var index = 0;
$(function(){
hqOrderNodeCreate();//总部下单
})
//总部下单
function hqOrderNodeCreate(){
var bigTitleData = {
bigAction: '总部下单',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//基地生产
function baseOrderNodeCreate(){
var bigTitleData = {
bigAction: '基地生产',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//仓库库存
function stockNodeCreate(){
var bigTitleData = {
bigAction: '仓库库存',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//发货
function delNodeCreate(){
var bigTitleData = {
bigAction: '发货',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//结算
function setNodeCreate(){
var bigTitleData = {
bigAction: '结算',
bigInfo: ''
};
createBigTitle(bigTitleData, index);
}
//生成大标题,一次生成一个
function createBigTitle(bigTitleData, index){
//生成大标题
$('.timeLine').append($('#bigTitleTpl').html()
.replace('{bigAction}', bigTitleData.bigAction)
.replace('{bigInfo}', bigTitleData.bigInfo)
);
//生成大标题下对应的内容
var bigContentData = [{
smallTime: '2010.10.11',
smallAction: '录单 ' + index,
smallInfo: '操作时间: 10:30:55'
},{
smallTime: '2010.10.15',
smallAction: '审核 ' + index,
smallInfo: '操作时间: 10:10:55'
},{
smallTime: '2010.10.15',
smallAction: '分发 ' + index,
smallInfo: '操作时间: 10:10:55'
}];
var bigContentTplStr = $('#bigContentTpl').html();
var str = '';
for(var i=0; i< bigContentData.length; i++){
str += bigContentTplStr.replace('{smallTime}', bigContentData[i].smallTime)
.replace('{smallAction}', bigContentData[i].smallAction)
.replace('{smallInfo}', bigContentData[i].smallInfo);
}
$('.bigContent:eq(' + index + ')').html(str).hide().slideDown(500);
}
//查看更多, 每次点击生成一个新的节点
$('.showMore').on('click', function(){
if($(this).text() === '查看更多'){
if(index === 0){
index++;
baseOrderNodeCreate();//基地生产
}
else if(index === 1){
index++;
stockNodeCreate();//仓库库存
}
else if(index === 2){
index++;
delNodeCreate();//发货
}
else if(index === 3){
index++;
setNodeCreate();//结算
$(this).text(' →_→ 没有记录了');
}
}
})
// + - 按钮 收缩效果
$(document).on('click', '.bigButtonSeeMore', function(){
var clickObj = $(this);
var bigContentObj = clickObj.parent().next().next();
if(clickObj.text() === '+'){
bigContentObj.slideDown(500, function(){
clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">-</a>');//切换图标
});
}
else if(clickObj.text() === '-'){
bigContentObj.slideUp(500, function(){
clickObj.html('<a href="javascript:;" rel="external nofollow" rel="external nofollow" ">+</a>');
});
}
})
</script>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
# jQuery
# 时光轴
# 利用jquery去掉时光轴头尾部线条的方法实例
# 查看更多
# 下单
# 角形
# 相关内容
# 感兴趣
# 给大家
# 更多关于
# 所述
# 程序设计
# 拖拽
# 操作技巧
# 小助手
# 选择器
# 讲述了
# color
# bold
# bigInfo
# float
# d5a
# bigAction
相关栏目：
【
网站优化151355 】
【
网络推广146373 】
【
网络技术251813 】
【
AI营销90571 】
相关推荐：
魔方云NAT建站如何实现端口转发？
Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】
个人网站制作流程图片大全,个人网站如何注销？
利用JavaScript实现拖拽改变元素大小
Laravel如何升级到最新的版本_Laravel版本升级流程与兼容性处理
JavaScript实现Fly Bird小游戏
Laravel Admin后台管理框架推荐_Laravel快速开发后台工具
如何在 React 中条件性地遍历数组并渲染元素
EditPlus中的正则表达式实战(5)
Laravel如何实现本地化和多语言支持？（i18n教程）
深入理解Android中的xmlns:tools属性
如何有效防御Web建站篡改攻击？
laravel怎么使用数据库工厂（Factory）生成带有关联模型的数据_laravel Factory生成关联数据方法
黑客如何利用漏洞与弱口令入侵网站服务器？
Windows10怎样连接蓝牙设备_Windows10蓝牙连接步骤【教程】
如何在搬瓦工VPS快速搭建网站？
百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭
php静态变量怎么调试_php静态变量作用域调试技巧【解答】
如何获取免费开源的自助建站系统源码？
php打包exe后无法访问网络共享_共享权限设置方法【教程】
Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用
js代码实现下拉菜单【推荐】
国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？
香港服务器租用每月最低只需15元？
Laravel怎么配置S3云存储驱动_Laravel集成阿里云OSS或AWS S3存储桶【教程】
如何快速搭建高效WAP手机网站吸引移动用户？
在Oracle关闭情况下如何修改spfile的参数
Laravel怎么使用Session存储数据_Laravel会话管理与自定义驱动配置【详解】
浅谈Javascript中的Label语句
Python制作简易注册登录系统
Laravel storage目录权限问题_Laravel文件写入权限设置
如何使用 jQuery 正确渲染 Instagram 风格的标签列表
Win11怎么设置默认图片查看器_Windows11照片应用关联设置
Laravel如何使用.env文件管理环境变量？（最佳实践）
如何用好域名打造高点击率的自主建站？
JavaScript数据类型有哪些_如何准确判断一个变量的类型
如何用腾讯建站主机快速创建免费网站？
Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控
如何在IIS中配置站点IP、端口及主机头？
ChatGPT回答中断怎么办 引导AI继续输出完整内容的方法
Laravel如何使用Scope本地作用域_Laravel模型常用查询逻辑封装技巧【手册】
如何快速搭建支持数据库操作的智能建站平台？
简单实现Android验证码
详解Android图表 MPAndroidChart折线图
Laravel如何构建RESTful API_Laravel标准化API接口开发指南
EditPlus中的正则表达式 实战(4)
手机软键盘弹出时影响布局的解决方法
网站制作报价单模板图片,小松挖机官方网站报价？
韩国服务器如何优化跨境访问实现高效连接？
Python数据仓库与ETL构建实战_Airflow调度流程详解