前端:Sitenotice
来自istudylinux
Istudylinux(讨论 | 贡献)2022年11月24日 (四) 14:35的版本
来源
https://huoqibaike.club/wiki/Mediawiki:sitenotice,效果也可参见这个网站。
依赖
- 管理员权限或者编辑interface的权限
源码
页面名称
- Mediawiki:Sitenotice
- Mediawiki:Common.js
- Mediawiki:Common.css
Mediawiki:Sitenotice
<div id="siteNoticeScroll"><ul>
<li>我们目前有{{NUMBEROFARTICLES}}个页面,{{NUMBEROFUSERS}}个用户,{{NUMBEROFEDITS}}次编辑。</li>
<li>'''欢迎加入wiki百科[[Special:用户登录|<font color="3862AE">注册一个账号</font>]],一起参与编写吧!'''</li>
<li>如果编辑遇到不懂的问题可以加入QQ群:群聊号码 xxxxxx</li>
<li>[[file:MediaWiki-2020-logo.png|20px|link=]] 如果你想编辑页面,请详细阅读查看[[编辑者手册]]</li>
</ul></div>
Mediawiki:Common.js
/* sitenotice from huoqibaike.com*/
$(function () {
var self = $('#siteNoticeScroll');
if (!self[0]) return;
var ul = self.find('ul:first');
ul.width(self.width() * self.find('li').length).attr({
'data-left': 0,
'data-length': self.find('li').length
}).find('li').width(self.width());
window.setInterval(function () {
var dataset = ul[0].dataset,
oldLeft = +dataset.left;
ul.css('marginLeft', -(++oldLeft * self.width()) + 'px').delay(730).queue(function () {
dataset.left = oldLeft === +dataset.length - 1 ? -1 : oldLeft;
$(this).dequeue();
});
}, 5000);
$(window).on('resize', function () {
ul.width(self.width() * self.find('li').length).animate({
marginLeft: -((+ul[0].dataset.left === -1 ? 0 : +ul[0].dataset.left) * self.width()) + 'px'
}, 370);
});
});
Mediawiki:Common.css
/*通知栏*/
#siteNoticeScroll {
width: 100%;
height: 25px;
line-height: 25px;
overflow: hidden;
text-align: center;
margin-bottom: 0.25em;
}
#siteNoticeScroll ul {
height: 25px;
line-height: 25px;
-webkit-transition: margin .73s ease-in-out;
-moz-transition: margin .73s ease-in-out;
transition: margin .73s ease-in-out;
}
#siteNoticeScroll li {
height: 25px;
list-style: none;
float: left;
width: 100%;
}