最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery简易时光轴实现方法示例
时间:2022-06-25 17:04:54 编辑:袖梨 来源:一聚教程网
代码如下 | 复制代码 |
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; }
订单小助手:
查看更多
{smallTime}
{smallAction}
{smallInfo}
varindex = 0; $(function(){ hqOrderNodeCreate();//总部下单 }) //总部下单 functionhqOrderNodeCreate(){ varbigTitleData = { bigAction:'总部下单', bigInfo:'' }; createBigTitle(bigTitleData, index); } //基地生产 functionbaseOrderNodeCreate(){ varbigTitleData = { bigAction:'基地生产', bigInfo:'' }; createBigTitle(bigTitleData, index); } //仓库库存 functionstockNodeCreate(){ varbigTitleData = { bigAction:'仓库库存', bigInfo:'' }; createBigTitle(bigTitleData, index); } //发货 functiondelNodeCreate(){ varbigTitleData = { bigAction:'发货', bigInfo:'' }; createBigTitle(bigTitleData, index); } //结算 functionsetNodeCreate(){ varbigTitleData = { bigAction:'结算', bigInfo:'' }; createBigTitle(bigTitleData, index); } //生成大标题,一次生成一个 functioncreateBigTitle(bigTitleData, index){ //生成大标题 $('.timeLine').append($('#bigTitleTpl').html() .replace('{bigAction}', bigTitleData.bigAction) .replace('{bigInfo}', bigTitleData.bigInfo) ); //生成大标题下对应的内容 varbigContentData = [{ 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' }]; varbigContentTplStr = $('#bigContentTpl').html(); varstr =''; for(vari=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();//基地生产 } elseif(index === 1){ index++; stockNodeCreate();//仓库库存 } elseif(index === 2){ index++; delNodeCreate();//发货 } elseif(index === 3){ index++; setNodeCreate();//结算 $(this).text(' →_→ 没有记录了'); } } }) // + - 按钮 收缩效果 $(document).on('click','.bigButtonSeeMore',function(){ varclickObj = $(this); varbigContentObj = clickObj.parent().next().next(); if(clickObj.text() ==='+'){ bigContentObj.slideDown(500,function(){ clickObj.html('-');//切换图标 }); } elseif(clickObj.text() ==='-'){ bigContentObj.slideUp(500,function(){ clickObj.html('+'); }); } })
|
相关文章
- 《原神》5.2卡池抽取建议 11-14
- 《原神》5.2版本新怪物介绍 11-14
- 《原神》希诺宁增伤触发方法 11-14
- 《原神》循音觅奇活动入口 11-14
- 《原神》循音觅奇兑换码获取方法 11-14
- 《原神》花羽会活动飞行技巧介绍 11-14