本文实例讲述了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="/UploadFiles/2021-04-02/jquery.js">更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月27日
2024年09月27日
- 纯音入心系列纯音乐《中央民族乐团-古筝传奇》1CD[MP3][253.1MB]
- 江玲.1989-这样你才爱我,是吗?【新作有声】【WAV+CUE】
- 郭美美.2010-我是郭美美【华纳】【WAV+CUE】
- 黄心懋1991-轻忧郁【滚石】【WAV+CUE】
- 群星.2000-大地金曲世纪回顾2CD【大地】【WAV+CUE】
- 王菲.1996-浮躁(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 群星.2022-传家电视剧原声带【东阳欢娱】【FLAC分轨】
- 《摇滚教父 伍佰黄金精选 2CD》 [WAV+CUE][1GB]
- 《凤凰传奇 我从草原来》[WAV/分轨][400MB]
- 《叶倩文 真心真意过一生》[WAV+CUE][400MB]
- 潘越云.1985-世间女子(滚石25周年经典复刻版)【滚石】【WAV+CUE】
- 陈柏宇.2009-CANT.BE.HALF【SONY】【WAV+CUE】
- 李明依.1989-小女生【滚石】【WAV+CUE】
- 《李荣浩 新时代创作新人王》[WAV分轨][310MB]
- 《黑鸭子与马头琴 史上最动听草原音乐》[WAV+CUE][320MB]