首页 > 代码库 > 时间轴插件完善,大事记清晰美观
时间轴插件完善,大事记清晰美观
经过前几次产品版本的发本,每次看到写的升级日志就头大,所以这里就利用时间轴插件实现一下这个升级日志的记录,方便查看!好啦,直接上代码:
/** * 初始化时间轴数据展示 * * @param {} data 时间轴数据对象 */ function initTimeAxis(data){ var timeAxisHtml = '<h1 class="title">' + data.name + '</h1>'; $.each(data.items,function(i,obj){ timeAxisHtml += '<div class="year"><h2><a href="javascript:void(0);">' + obj.year + '<i></i></a></h2>'; if(obj.items.length > 0){ timeAxisHtml += '<div class="list"><ul>'; $.each(obj.items,function(j,infoObj){ if(infoObj.important){ timeAxisHtml += '<li class="cls highlight">'; } else { timeAxisHtml += '<li class="cls">'; } timeAxisHtml += '<p class="date">' + infoObj.date + '</p>' + '<p class="intro">' + infoObj.title + '</p>' + '<p class="version">' + infoObj.version + '</p>'; if (infoObj.infos.length > 0) { timeAxisHtml += '<div class="more">'; $.each(infoObj.infos,function(k,moreInfo){ timeAxisHtml += '<p>' + moreInfo + '</p>'; }); timeAxisHtml += '</div>'; } timeAxisHtml += '</li>'; }); timeAxisHtml += '</ul></div>'; } }); $('.main').html(timeAxisHtml); }
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML> <html> <head> <base href=http://www.mamicode.com/"">>body { margin:0; font:12px Microsoft YaHei,Arial,sans-serif; } html,body { -webkit-text-size-adjust:none; background:#f7f7f7; background: #3a3c48 url("../images/log/content-bg.png"); } div,form,input,textarea,p,ul,li,dl,dt,dd,h1,table,h2 { padding:0; margin:0; } li { list-style-type:none; } ol,ul { list-style:none; } input { vertical-align:middle; font-size:100%; } img { vertical-align:top; border:0; } em,i { font-style:normal; } .l { float:left; } .r { float:right; } .c { clear:both; } .o { overflow:hidden; } .left { float:left; } .right { float:right; } a { color:#666; text-decoration:none; } a:hover { color:#F60; text-decoration:underline; } .clearfix { *zoom:1; } .clearfix:before,.clearfix:after { display:table; content:""; } .clearfix:after { clear:both; } .content { position:relative; width:100%; height: auto; margin:0 auto; } ul, li { list-style: none; } a { text-decoration: none; } a:hover{ text-decoration: none; cursor: point; } hr { height: 0; border-left: none; border-right: 0; border-top: 1px dashed #2d2f34; border-bottom: 1px dashed #474954; } .top{ margin-top: 60px; } .top img{ width: 100%; margin-top: -10px; } .content { padding: 50px 0; width: 100%; } .content .wrapper { position: relative; background: url("../images/log/release-bg.png") repeat-y right top;/*no-repeat right top*/ width: 960px; margin: 0 auto; } .content .light { position: absolute; left: 55px; top: -50px; width: 152px; height: 191px; background: url("../images/log/light-top.png") no-repeat top center; } .content .light i { position: absolute; width: 100%; height: 100%; top: 0; background: url("../images/log/light.png") no-repeat top center; } .content .line-left { position: absolute; left: 0; top: 15px; width: 70px; } .content .line-right { position: absolute; right: 0; top: 15px; width: 460px; } .content .main { background: url("../images/log/line-bg.png") repeat-y 249px 0; } .content .main .title { position: absolute; line-height: 40px; padding-left: 67px; left: 230px; top: 0; color: #58a6fb; font-size: 24px; background: url("../images/log/clock.png") no-repeat left top; } .content .main .year { position: relative; z-index: 100; } .content .main .year h2 { height: 40px; width: 170px; padding-right: 30px; font-size: 24px; line-height: 40px; text-align: right; } .content .main .year h2 a { color: #58a6fb; } .content .main .year h2 i{ display:block; position:relative; height:0; width:0; left:190px; top:-20px; border-width:6px; border-style:solid; border-color:#59a7fb transparent transparent transparent; -webkit-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; -o-transition:.5s; transition:.5s; -webkit-transform-origin:6px 3px; -moz-transform-origin:6px 3px; -ms-transform-origin:6px 3px; -o-transform-origin:6px 3px; transform-origin:6px 3px } .content .main .year .list{ margin:10px 0; position:relative; overflow:hidden; -webkit-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -moz-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -ms-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -o-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s } .content .main .year .list ul { bottom: 0; } .content .main .year .list ul li { background: url("../images/log/circle.png") no-repeat 235px 31px; padding: 30px 0; color: #a1a4b8; } .content .main .year .list ul li.highlight { background-image: url(http://p4.qhimg.com/d/inn/05a63fc5/circle-h.png); } .cls { zoom: 1; } .cls:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .content .main .year .list ul li.highlight .date, .content .main .year .list ul li.highlight .intro { color: #ec6a13; } .content .main .year .list ul li .date,.content .main .year .list ul li .version{ float:left; display:block; clear:left; width:200px; line-height:24px; text-align:right } .content .main .year .list ul li .date{ font-size:18px; line-height:32px; color:#bec1d5 } .content .main .year .list ul li .intro, .content .main .year .list ul li .more { float: left; display: block; width: 600px; margin-left: 100px; line-height: 24px; } .content .main .year .list ul li .intro { font-size: 18px; line-height: 32px; color: #63d029; } .content .wrapper:first-child .main .year.close h2 i{ transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg) } .content .wrapper:first-child .main .year.close .list{ opacity:0; height:0!important; } .content .main .year h2 i{ *left:40px /* *:IE6/7识别的样式; _:仅IE6识别*/ }
插件是从网上找到的,先谢啦,使用的时候发现兼容性和灵活性不够,所以就简单的改了一下,兼容性IE6+,FireFox和Google Chrome三大主流浏览器全兼容,并且能够能在手机上访问,页面放大缩小都不会出现问题!附上完整资源下载地址:http://download.csdn.net/detail/luo201227/8016321时间轴插件完善,大事记清晰美观
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。