微件:网站维护时间线
<style>
- {
margin: 0;
} .timeline {
height: 100%; position: relative;
} .timeline canvas {
position: absolute; width: 100%; height: 105%; left: 0; top: 45px;
} .timeline figcaption {
font-weight: 400; font-size: 24px; text-transform: uppercase; -webkit-text-stroke: .25px;
} .timeline h2 {
font-weight: 400; font-size: 30px; padding-bottom: 20px; color: #b2cde9!important; text-transform: uppercase; line-height: 1.2 !important;
} .timeline h6 {
color: #0090F5!important; font-size: 17px; font-weight: 400;
} .timeline p, .timeline ol {
font-weight: 400; padding: 3px 0 20px 0; color: #575757!important; text-align: justify; width: 70%;
} .timeline ol {
list-style: disc; margin-top: -20px; padding-left: 40px;
} .timeline figure {
float: right; width: 100%;
} .timeline article {
position: relative; width: 38%; overflow: hidden;
} .timeline article:first-of-type {
float: left; text-align: right;
} .timeline article:first-of-type p, .timeline article:first-of-type figure {
float: right;
} .timeline article:last-of-type {
float: right;
} .timeline article:last-of-type h2 {
color: #c6e0aa!important;
} .timeline article:last-of-type h6, .timeline article:last-of-type a {
color: #40aa00!important;
} .timeline article:last-of-type a:hover {
color: #95D40D!important;
} </style> </head> <body>
<section id="timeline">
<canvas id="cvs3"></canvas> <article>
新增功能
<figure> <figcaption>全站系统版本更新</figcaption>
2021.6.23
升级至2021年6月23日维基媒体发布的MW1.31.15(c755afe) 补丁版本,此次更新跨越了7个小版本。
</figure> <figure> <figcaption>看板娘系统重构</figcaption>
2021.6.26-27
去除冗余代码;新增5个看板娘;加入换装功能(为 pio酱 提供了86套皮肤 / 为 Tia酱 提供了62套皮肤 / 为 22、33 提供了21套皮肤 / 为 22、33 提供了21套皮肤 / 为 海王星 提供了19套皮肤)。
</figure> <figure> <figcaption>支持繁简转换</figcaption>
2021.7.12-14
增添繁简转换插件,在左上角显示按钮,可在所有页面使用,支持繁体源代码编辑和繁体字搜索。
</figure> <figure> <figcaption>编辑记录页改版</figcaption>
2021.7.15-16
添加图标;引入显示维护组用户的用户组的小工具;并更新最近更改图例。
</figure> <figure> <figcaption>左侧显示浮动目录</figcaption>
2021.8.10-12
当条目中的标题超过三个时,条目左侧会出现目录,侧边栏划上去时可以看见,点击可跳转到指定标题。
</figure> <figure> <figcaption>用户贡献页改版</figcaption>
2021.8.13
改变顶部用户信息控制栏;维护组用户可分名字空间查看其他用户的编辑数量。
</figure> </article> <article>
系统修复
<figure> <figcaption>全站背景修正</figcaption>
2021.6.23-7.6
修正全站背景《画画的纱雾酱》,重新抠图,减少体积,加快显示效率;加入春天飞鸟的顶部栏背景
</figure> <figure> <figcaption>中立性存疑警告改为只为游客展示</figcaption>
2021.7.3
已注册用户在访问含有
</figure> <figure> <figcaption>Wikiplus小工具本地化适配</figcaption>
2021.7.4
修复桌面端显示问题,并在移动端加入该工具。
</figure> <figure> <figcaption>重写首页及主题导航图片规则</figcaption>
2021.7.28
更正首页和主题导航图片链接,修正失效图片,大大加快访问速度。
</figure> <figure> <figcaption>底部导航模板改为默认折叠</figcaption>
2021.8.1
相对较长的导航模板在条目中默认折叠,减少条目空间
</figure> <figure> <figcaption>更改验证系统</figcaption>
2021.7.12
改为知识提问型验证系统,不再使用Cloudflare的验证,同时取消其频繁的JS质询
</figure> <figure> <figcaption>改变条目中二级标题样式</figcaption>
2021.7.12
为二级标题增加黄底主题色,更符合本站样式
</figure> </article>
</section> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script>
function Timeline(cvs) {
var self = this, paused = true, rafid = 0, mouse = { x: 0, y: 0 }, canvas = cvs, ctx = null;
self.lines = [];
self.isOK = false; self.options = { speed: 0.1, density: 8, radius: 600, }; self.targets = [ [20, 26, 58, 64, 114, 116], [20, 50, 52, 100 , 106, 110, 116] ]; self.dotColors = [ ['#13669b', 'rgba(19, 102, 155, 0.3)', 'rgba(19, 102, 155, 0.08)'], ['#7dd317', 'rgba(113, 222, 15, 0.3)', 'rgba(91, 164, 22, 0.12)'], ];
self.isPaused = function () { return paused; };
function InitDots() { var tl = $('.timeline'); var top = tl.find('h2').outerHeight();
self.lines[0].dots = []; var y = top; tl.find('article:first figure').each(function () {
self.lines[0].dots.push([$(this).outerWidth() + 20, y + 20]);
y += $(this).outerHeight(); });
self.lines[1].dots = []; var y = top; tl.find('article:last figure').each(function () {
self.lines[1].dots.push([canvas.width - $(this).outerWidth() - 20, y + 20]);
y += $(this).outerHeight(); }); }
function OnResize() { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight;
var wasPaused = paused; self.toggle(false); // Init lines self.lines[0].reset(canvas.offsetWidth / 2 - 15); self.lines[1].reset(canvas.offsetWidth / 2 + 15);
InitDots();
self.toggle(!wasPaused); }
function init() { var result = false; try { result = !!(canvas.getContext && (ctx = canvas.getContext('2d')));
self.lines[0] = new Line(0, canvas.offsetHeight - 100, '#4789a3', self.options, mouse); self.lines[1] = new Line(0, canvas.offsetHeight - 100, '#a0d59c', self.options, mouse);
} catch (e) { return false; }
$(canvas).mousemove(function (e) {
if (e.offsetX) { mouse.x = e.offsetX; mouse.y = e.offsetY; } else if (e.layerX) { mouse.x = e.layerX; mouse.y = e.layerY; } else { mouse.x = e.pageX - $(canvas).offset().left; mouse.y = e.pageY - $(canvas).offset().top; } });
$(window).resize(OnResize);
OnResize();
return result; }
function Line(y, height, color, options, mouse) { var self = this;
self.color = color; self.options = options; self.mouse = mouse; self.height = height; self.dots = []; self.y = y;
self.points = [];
self.reset = function (x, f) { self.points = []; for (var y = self.y; y < self.height; y += self.options.density) self.points.push(new Point(x, y, self.color)); }
self.update = function () { for (var i = 0; i < self.points.length; i++) self.points[i].update(self.mouse, self.options); }
function Point(x, y) { this.y = y; this.x = x; this.base = { x: x, y: y };
this.update = function (mouse, options) { var dx = this.x - mouse.x, dy = this.y - mouse.y, alpha = Math.atan2(dx, dy), alpha = (alpha > 0 ? alpha : 2 * Math.PI + alpha), d = options.radius / Math.sqrt(dx * dx + dy * dy);
this.y += Math.cos(alpha) * d + (this.base.y - this.y) * options.speed; this.x += Math.sin(alpha) * d + (this.base.x - this.x) * options.speed; } } }
function drawCircle(p, r, color) { ctx.fillStyle = color; ctx.beginPath(); ctx.arc(p.x, p.y, r, 0, 2 * Math.PI, true); ctx.closePath(); ctx.fill(); }
function drawLine(p1, p2) { ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); ctx.closePath(); }
function redraw() { ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < 2; i++) { var points = self.lines[i].points;
ctx.beginPath(); ctx.lineWidth = 2; ctx.strokeStyle = self.lines[i].color; ctx.moveTo(points[15].x, points[15].y);
for (var j = 15; j < points.length - 2; j++) { var point = points[j];
var xc = (points[j + 1].x + point.x) / 2; var yc = (points[j + 1].y + point.y) / 2;
ctx.quadraticCurveTo(point.x, point.y, xc, yc); } ctx.stroke(); ctx.closePath();
// Dots ctx.lineWidth = 1.2; ctx.strokeStyle = self.dotColors[i][2]; for (var j = 0; j < self.lines[i].dots.length; j++) { var dot = self.lines[i].dots[j], id = self.targets[i][j]; dot2 = [ (self.lines[i].points[id].x + self.lines[i].points[id + 1].x) / 2, (self.lines[i].points[id].y + self.lines[i].points[id + 1].y) / 2, ];
var p1 = { x: dot[0], y: dot[1] }; var p2 = { x: dot2[0], y: dot2[1] };
drawLine(p1, p2); drawCircle(p1, 4, self.dotColors[i][0]);
drawCircle(p2, 11, self.dotColors[i][1]); drawCircle(p2, 5.5, self.dotColors[i][0]); } } }
function animate() { rafid = requestAnimationFrame(animate);
self.lines[0].update(); self.lines[1].update();
redraw(); }
self.toggle = function (run) { if (!self.isOK) return false;
if (run === undefined) self.toggle(!paused);
else if (!!run && paused) { paused = false; animate(); } else if (!!!run) { paused = true; cancelAnimationFrame(rafid); } return true; }
self.isOK = init();
} new Timeline($('#cvs3').get(0)).toggle(true); </script>