Jochoi的代碼儲存頁
Codes for reference 從別人的文檔裡找出來的代碼
- Text shown when hovering over text
- image
- comment
- 偷看是可耻的作弊行为！
- Geolocation list places
- timeout texts
- scp-bg box
- nested collapsible blocks
- textchange for login
- fake tags
- multiple collapsibles
- open/hide sidebar
- view:source tab
Text shown in hovered boxOriginal text
[[module css]]
.hover {
text-decoration: none;
border-bottom: none;
color:black;
}
.hover:hover {
text-decoration: none;
border-bottom: none;
color:#004c00;
}
.hover span { display: none;}
.hover:hover span {
position: absolute;
display: inline;
margin: 20px 0px;
height: auto;
width: auto;
background: #FFF;
border: 1px solid #000;
color: black;
padding: 0.5em;
}
.hover:hover span span {
position: relative;
margin: auto;
height: auto;
width: auto;
border: none;
padding: 0;
}
[[/module]]
[[span class="hover"]][[span]]Text shown in hovered box[[/span]]Original text[[/span]][[html]]
<p style="width:100%;" align="center">
<img src="http://scpsandboxcn.wikidot.com/local--files/letters/letters-02.png" width="100%">
</p>
[[/html]]三波特兰城的官方旗帜。
[[div class="scp-image-block block-right" style="width:300px;"]]
[[image http://scp-wiki.wdfiles.com/local--files/three-portlands-hub/three_ports_flag style="width:300px;" link=#]]
[[div class="scp-image-caption" style="width:300px;"]]
三波特兰城的官方旗帜。
[[/div]]
[[/div]]
Site-CN-71外部，由驻站特工Chong Fat所拍摄。点击放大
[[div class="scp-image-block block-right" style="width:300px;"]]
[[image CN-71.JPG style="width:300px;" link="http://scpsandboxcn.wikidot.com/local--files/shark/CN-71.JPG"]]
[[div class="scp-image-caption" style="width:300px;"]]
Site-CN-71外部，由驻站特工[https://commons.wikimedia.org/wiki/User:Chong_Fat Chong Fat]所拍摄。点击放大
[[/div]]
[[/div]][!--
comments.
--][[module css]]
.SekaisTitle, .SekaisClass,.SekaisRemarks, .SekaisPreview {display: none;}
#view-source-button::before {
content: '偷看';
}
#view-source-button::after {
content: '是可耻的作弊行为！';
}
[[/module]][[html]]
<head><script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script></head>
<body><script language="Javascript">document.write(geoplugin_countryName())</script></body>
[[/html]][[html]]
<head><script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script></head>
<body><script language="Javascript">document.write(geoplugin_city())</script></body>
[[/html]][[html]]
<head><script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script></head>
<body><script language="Javascript">document.write(geoplugin_regionName())</script></body>
[[/html]][[html]]
<head><script language="JavaScript" src="http://www.geoplugin.net/javascript.gp" type="text/javascript"></script></head>
<body><script language="Javascript">document.write(geoplugin_region())</script></body>
[[/html]][[html]]
</style>
<body>
<center><button onclick="this.style.visibility='hidden'; move(); showDiv()"> click this to show texts below </button></center>
<br>
<div id="myProgress">
<div id="myBar">
<div id="label">0%</div>
</div>
</div>
<hr>
<div id="loader"></div>
<div style="display:none;" id="myDiv1" class="animate-bottom">
<span><br><br><b>text1</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv2" class="animate-bottom">
<span><b>text2</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv3" class="animate-bottom">
<span><b>text3</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv4" class="animate-bottom">
<span><b>text4</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv5" class="animate-bottom">
<span><b>text5</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv6" class="animate-bottom">
<span><b>text6</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv7" class="animate-bottom">
<span><b>text7</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv8" class="animate-bottom">
<span><b>text8</b><br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv9" class="animate-bottom">
<span><b>text9</b> <br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv10" class="animate-bottom">
<span><b>text10</b> <br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv11" class="animate-bottom">
<span><b>text11</b> <br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv12" class="animate-bottom">
<span><b>text12</b> <br><br><br><br></span>
</div>
<div style="display:none;" id="myDiv13" class="animate-bottom">
<span><b>text13</b><br><br></span>
<div style="display:none;" id="myDiv14" class="animate-bottom">
<span><b>text14</b><br><br><br><br></span>
</div>
</div>
</div>
<script>
function move() {
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 25);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
document.getElementById("label").innerHTML = width * 1 + '%';
}
}
}
function showDiv() {
setTimeout(showPage1, 2500);
setTimeout(showPage2, 5000);
setTimeout(showPage3, 7500);
setTimeout(showPage4, 10000);
setTimeout(showPage5, 12500);
setTimeout(showPage6, 15000);
setTimeout(showPage7, 17500);
setTimeout(showPage8, 20000);
setTimeout(showPage9, 22500);
setTimeout(showPage10, 25000);
setTimeout(showPage11, 27500);
setTimeout(showPage12, 30000);
setTimeout(showPage13, 40000);
setTimeout(showPage14, 40000);
}
function showPage1() {
document.getElementById("myDiv1").style.display = "block";
}
function showPage2() {
document.getElementById("myDiv2").style.display = "block";
}
function showPage3() {
document.getElementById("myDiv3").style.display = "block";
}
function showPage4() {
document.getElementById("myDiv4").style.display = "block";
}
function showPage5() {
document.getElementById("myDiv5").style.display = "block";
}
function showPage6() {
document.getElementById("myDiv6").style.display = "block";
}
function showPage7() {
document.getElementById("myDiv7").style.display = "block";
}
function showPage8() {
document.getElementById("myDiv8").style.display = "block";
}
function showPage9() {
document.getElementById("myDiv9").style.display = "block";
}
function showPage10() {
document.getElementById("myDiv10").style.display = "block";
}
function showPage11() {
document.getElementById("myDiv11").style.display = "block";
}
function showPage12() {
document.getElementById("myDiv12").style.display = "block";
}
function showPage13() {
document.getElementById("myDiv13").style.display = "block";
}
function showPage14() {
document.getElementById("myDiv14").style.display = "block";
}
</script>
</body>
[[/html]]
text shown within the box
[[div style="background: url(http://scp-wiki.wdfiles.com/local--files/the-great-hippo/scp_trans.png) 80% 35% no-repeat; float: center; border: solid 2px #000000; padding: 8px 15px; box-shadow: 0 1px 3px rgba(0,0,0,.2);"]]
@@@@
@@@@
text shown within the box
@@@@
@@@@
[[/div]][[html]]
<style type="text/css">
body {
font-family: verdana, arial, helvetica, sans-serif;
font-size: 12.8px; /* 16px * 0.8 */
color: #333;
line-height: 141%;
}
#classified-info, #meme-agent {
display: none;
}
.printuser{
}
.printuser a{
margin-right: -1px;
}
.printuser img.small{
vertical-align: -0.3em;
margin: 0;
width: 16px;
height: 16px;
z-index:0;
padding: 1px 9px 1px 8px;
background-repeat: no-repeat;
background-position: center left;
}
.printuser.anonymous img.small{
padding: 1px;
}
a.avatar-hover, a.avatar-hover:hover {
background: none;
background-image: url(../images/background/opacity2.png);
padding: 8px;
text-decoration: none;
font-size: 130%;
color: black;
font-weight: bold;
}
a.avatar-hover img{
vertical-align: middle;
}
a.avatar-hover div{
position: relative;
}
a.avatar-hover div div{
position: absolute;
left: 48px;
top: 0;
height: 48px;
right: 0px;
width: 100%;
background-color: white;
opacity: 0.9;
filter: alpha(opacity=90);
}
a.avatar-hover div span{
padding: 0.5em 1em;
margin: 0 1em;
background-color: white;
opacity: 0.9;
filter: alpha(opacity=90);
z-index: 30;
}
.printuser a:hover img.large{
display: block;
}
.printuser .ip{
font-size: 90%;
}
blockquote {
border: 1px dashed #999;
padding: 0 12.8px;
background-color: #f4f4f4;
margin: 1em 0;
}
a {
color: black;
cursor: pointer;
text-decoration: none;
font-size: 12.8 px;
}
.collapsed {
display: none;
}
h3 {
font-size: 150%;
font-weight: bold;
margin-bottom: 0;
}
h4 {
font-size: 130%;
font-weight: bold;
margin-bottom: 0;
}
.image-container.floatright {
padding-right: 0;
float: right;
}
tt{
font-family: 'Andale Mono', 'Courier New', Courier, monospace;
font-size: 98%;
}
.collapsed {
display: none;
}
</style>
<script type="text/javascript">
var collapsibleLink = function(className) {
var collapsed = document.querySelectorAll("." + className + ".collapsed");
var expanded = document.querySelectorAll("." + className + ":not(.collapsed)");
var i;
for(i = 0; i < collapsed.length; i++) {
collapsed[i].classList.remove("collapsed");
}
for(i = 0; i < expanded.length; i++) {
expanded[i].classList.add("collapsed");
}
}
var hideBlock = function(blockName) {
var expanded = document.querySelectorAll("." + blockName + ":not(.collapsed)");
var i;
for(i = 0; i < expanded.length; i++) {
expanded[i].classList.add("collapsed");
}
}
var showBlock = function(blockName) {
var collapsed = document.querySelectorAll("." + blockName + ".collapsed");
var i;
for(i = 0; i < collapsed.length; i++) {
collapsed[i].classList.remove("collapsed");
}
}
</script>
<div class="block1">
<p><blockquote><a onclick="collapsibleLink('block1');">1st collapsed
</a></blockquote></p>
</div>
<div class="block1 collapsed">
<p><blockquote><a onclick="collapsibleLink('block1');">1st shown</a></blockquote></p>
<p> content shown </p>
<div class="block2">
<p><blockquote><a onclick="collapsibleLink('block2');">2nd collapsed
</a></blockquote></p>
</div>
<div class="block2 collapsed">
<p><blockquote><a onclick="collapsibleLink('block2');">2nd shown</a></blockquote></p>
<p> content shown </p>
<div class="block3">
<p><blockquote><a onclick="collapsibleLink('block3');">3rd collapsed
</a></blockquote></p>
</div>
<div class="block3 collapsed">
<p><blockquote><a onclick="collapsibleLink('block3');">3rd shown</a></blockquote></p>
<p> content shown </p>
</div>
</div>
</div>
[[/html]]Ms.Sue，被收容物分食，注销档案。
Dr.Harvey，跳楼，欸，都第几个了，注销档案。
Dr.Clef，哦，现在是Dr.Bright了，转移档案。
[[div class="textchange"]]
[[module ListUsers users="."]]
[[div class="sitemember"]]
Ms.Sue，被收容物分食，注销档案。
Dr.Harvey，跳楼，欸，都第几个了，注销档案。
%%title%%，哦，现在是Dr.Bright了，转移档案。
[[/div]]
[[/module]]
[[div class="sitemember"]]
Ms.Sue，被收容物分食，注销档案。
Dr.Harvey，跳楼，欸，都第几个了，注销档案。
Dr.Clef，哦，现在是Dr.Bright了，转移档案。
[[/div]]
[[/div]]
[[module ListUsers users="."]]
[[module css]]
.textchange div.sitemember:nth-child(2) {
display:none;
}
[[/module]][[div class="pseudo-tags"]]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/cn1000#pages cn1000]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/euclid#pages euclid]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/k级情景#page k级情景]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/scp#pages scp]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/site-cn-71#pages site-cn-71]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/原创#pages 原创]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/地点#pages 地点]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/城市#pages 城市]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/基金会制#pages 筑基会制]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/放射性#pages 放射性]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/未收容#pages 未收容]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/超维度#pages 超维度]
* [http://scp-wiki-cn.wikidot.com/system:page-tags/tag/香城#pages 香城]
[[/div]]
[[module css]]
@import url('http://www.scp-wiki.net/local--files/chicago-spirit/Yukarimobile.css');
.footnotes-footer {
visibility: hidden;
height: 0;
padding: 0;
margin: 0;
}
#main-content .page-tags {
display: none;
}
div.pseudo-tags ul {
font-size: 85%;
border-top: 1px solid #BBB;
display: inline-block;
margin: 10px 0 0;
padding: 0 2px;
list-style: none;
}
div.pseudo-tags li {
color: #b01;
text-decoration: none;
display: inline-block;
margin: 0 1px;
cursor: pointer;
}
[[/module]][[div_ class="colmod-block"]]
[[ul]][[li class="[[#if 1 | folded | unfolded ]] [[#if 0 | colmod-collapsiblealt ]]"]][[ul]]_[[/ul]][[div class="colmod-link-top"]]
[[div_ class="foldable-list-container"]]
[# + 显示标题1][[#if 0 | | [# - 隐藏标题1] ]][[/div]][[/div]][[div class="colmod-content"]]
文本1
[[div_ class="colmod-block"]]
[[ul]][[li class="[[#if 1 | folded | unfolded ]] [[#if 0 | colmod-collapsiblealt ]]"]][[ul]]_[[/ul]][[div class="colmod-link-top"]]
[[div_ class="foldable-list-container"]]
[# + 显示标题2][[#if 0 | | [# - 隐藏标题2] ]][[/div]][[/div]][[div class="colmod-content"]]
文本2
[[div_ class="colmod-block"]]
[[ul]][[li class="[[#if 1 | folded | unfolded ]] [[#if 0 | colmod-collapsiblealt ]]"]][[ul]]_[[/ul]][[div class="colmod-link-top"]]
[[div_ class="foldable-list-container"]]
[# + 显示标题3][[#if 0 | | [# - 隐藏标题3] ]][[/div]][[/div]][[div class="colmod-content"]]
文本3
[[/div]][[div [[#if 1 | | class="colmod-link-end" ]] ]]
[[div_ class="foldable-list-container"]]
[[#if 1 | | [# - Hide block] ]][[/div]][[/div]][[/li]][[/ul]][[/div]]
[[/div]][[div [[#if 1 | | class="colmod-link-end" ]] ]]
[[div_ class="foldable-list-container"]]
[[#if 1 | | [# - Hide block] ]][[/div]][[/div]][[/li]][[/ul]][[/div]]
[[/div]][[div [[#if 1 | | class="colmod-link-end" ]] ]]
[[div_ class="foldable-list-container"]]
[[#if 1 | | [# - Hide block] ]][[/div]][[/div]][[/li]][[/ul]][[/div]][[module css]]
@media (min-width: 979px) {
#side-bar {
opacity: 0;
left: -30em;
transition: all 2s;
}
#side-bar:target {
opacity: 1;
left: -11em;
transition: all 2s;
}
.sidebar-opener {
position:fixed;
top: 25%;
left: 20em;
}
.sidebar-closer {
position:fixed;
top: 25%;
left: 20em;
display:none;
}
#side-bar:target+#main-content .sidebar-opener {
display:none;
}
#side-bar:target+#main-content .sidebar-closer {
display:block;
}
#main-content {
margin: 0 0 0 9em !important;
}
}
[[/module]]
[[div class="sidebar-opener"]]
[[a href="#side-bar"]]≡[[/a]]
[[/div]]
[[div class="sidebar-closer"]]
[[a href="###"]]X[[/a]]
[[/div]]| dsd | dsfd |
|---|---|
| dfsdf | |
