forked from audreyt/kp
-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
executable file
·257 lines (250 loc) · 10.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<html>
<head>
<meta charset="UTF-8" />
<title>小莎滑出來推你坑</title>
<meta content="小莎滑出來推你坑" property="og:title">
<meta content="小莎滑出來推你坑" property="og:site_name">
<meta content="http://orinx.github.io/foxmosa-toldyou/img/foxmosa-reddino.png" property="og:image">
<meta content="小莎滑出來推你坑還在修改中，歡迎 PR (炸)" property="og:description">
<meta content="website" property="og:type">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="src/foxmosa-v2.css">
<style>
.header {
text-align: center;
margin: 80px 0 30px;
}
.container {
position: relative;
width: 800px;
margin: 50px auto;
margin-bottom: 400px;
}
h3 {
padding-top: 30px;
}
hr {
margin-top: 50px;
}
p {
font-size: 14px;
line-height: 24px;
}
table th,
table td {
font-size: 14px;
}
#main-nav {
position: absolute;
left: 100%;
top: 40px;
min-width: 114px;
}
.egg {
display: none;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=537359199699058&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="header">
<h1>小莎滑出來推你坑</h1>
<h4><i>Foxmosa slide in and push you into a hole!</i></h4>
<div class="fb-like" data-href="http://orinx.github.io/foxmosa-toldyou/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
<div class="container">
<div class="btn-group-vertical" id="main-nav">
<a href="#introduction" class="go-anchor btn btn-default">簡介</a>
<a href="#install" class="go-anchor btn btn-default">如何安裝</a>
<a href="#options" class="go-anchor btn btn-default">參數設定</a>
<a href="#download" class="go-anchor btn btn-default">下載</a>
<a href="#history" class="go-anchor btn btn-default">更新紀錄</a>
<a href="#about" class="go-anchor btn btn-default">關於作者</a>
</div>
<div class="col_12">
<h3 id="introduction">簡介</h3>
<p><img src="http://i.minus.com/i4LUIBDIBIHXl.png"><br />
一張圖勝過千言萬語，對不起我懶惰 XD
</p>
<br>
<h4>在安裝「小莎滑出來推你坑」之後 ... 我震驚了</h4>
<p>
當您在的網頁中安裝了「小莎滑出來推你坑」Plugin 之後，神奇的事情發生了<br>到訪者進入您的頁面、並捲動到頁面底端之後，小莎就會 <mark> 滑 出 來 對 他 們 推 坑 ！ </mark><br>每次的瀏覽，都會從 <a href="http://moztw.org" target="_blank">MozTW - Mozilla 台灣社群</a> 中隨機的取得一個坑，來對瀏覽者說明。<span class="label label-info">尚未完成</span>
</p>
</div>
<hr>
<div class="col_12">
<h3 id="install">如何安裝</h3>
<p>步驟 1 : 請先在您的網頁中，引用 <code>jquery</code>，如果已經有了，可省略此步驟</p>
<pre><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script></pre>
<br>
<p>步驟 2 : 請在您的網頁中 <code><head> ... </head></code> 內，引用下方 CSS</p>
<pre><link rel="stylesheet" href="http://orinx.github.io/foxmosa-toldyou/src/foxmosa-v2.css"></pre>
<br>
<p>步驟 3 : 請在您的網頁中，緊鄰 <code></body></code> 結束標記之前，引用下方 JS</p>
<pre><script src="http://orinx.github.io/foxmosa-toldyou/src/foxmosatalks-v2.js"></script>
<script>$.foxmosatalks();</script></pre>
</div>
<hr>
<div class="col_12">
<h3 id="options">參數設定</h3>
<p>
滑進滑出還不夠！給想更進一步探索這個神奇世界的你
</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th class="text-center">Option</th>
<th class="text-center">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" style="vertical-align: middle;">api</td>
<td>API 來源網址</td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">image</td>
<td>圖片網址，可設定 單張 或 多張圖片，設定多張圖片請用 array 包住<br><small>預設：<br><code>['http://orinx.github.io/foxmosa-toldyou/img/foxmosa-gift.png',<br>'http://orinx.github.io/foxmosa-toldyou/img/foxmosa-reddino.png']</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">height</td>
<td>圖片高度<br><small>預設：<code>450</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">width</td>
<td>圖片寬度<br><small>預設：<code>466</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">effect</td>
<td>出場效果，可選參數：<code>default</code>, <code>fast</code>, <code>slow</code>, <code>veryslow</code>, <code>jump</code>, <code>sneaky</code><br><small>預設：<code>default</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">popup_effect</td>
<td>對話框出現效果，可選參數：<code>default</code>, <code>fade</code>, <code>slide</code>, <code>zoom</code><br><small>預設：<code>fade</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">popup_radius</td>
<td>對話框圓角<br><small>預設：<code>8px</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">popup_color</td>
<td>對話框文字顏色<br><small>預設：<code>black</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">popup_bgcolor</td>
<td>對話框背景顏色<br><small>預設：<code>beige</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">readmore_color</td>
<td>了解更多連結顏色<br><small>預設：<code>brown</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">comein_position</td>
<td>設定出場的位置時機，數值範圍：<code>0</code> ~ <code>100</code>，以頁面捲動的百分比計算<br>例如設定為 <code>50</code> ，表示捲動至頁面高度之 50% 後，顯示<br><small>預設：<code>80</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">default_text</td>
<td>對話框預設文字<br><small>預設：<code>你好，我是小莎 >/////<</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">enter_from</td>
<td>設定從左側或右側出場，可選參數：<code>left</code>,<code>right</code><br><small>預設：<code>left</code></small></td>
</tr>
<tr>
<td class="text-center" style="vertical-align: middle;">enter_distance</td>
<td>設定出場後，與邊界的距離<br><small>預設：<code>-130</code></small></td>
</tr>
</tbody>
</table>
</div>
<br>
<div class="col_12">
<h4>使用範例一</h4>
<pre><span class="label label-success">CODE</span>
$.foxmosatalks({
image: [
'../img/foxmosa-gift.png',
'../img/foxmosa-reddino.png' // 設定為多張圖片
],
width: 800,
height: 774,
effect: 'jump',
popup_effect: 'zoom',
default_text: '哈囉，我是小莎，大家都說我是 MozTW 的吉祥物！希望大家多多來 MozTW 陪我玩'
});
</pre>
</div>
<br>
<div class="col_12">
<h4>使用範例二</h4>
<pre><span class="label label-success">CODE</span>
$.foxmosatalks({
image: '../img/foxmosa-reddino.png', // 設定單張圖片
effect: 'slow',
popup_effect: 'slide',
popup_radius: '16px',
popup_color: '#333',
popup_bgcolor: '#F3F3F3',
readmore_color: '#52BBBB',
comein_position: 50,
enter_from: 'right',
enter_distance: 10
});
</pre>
</div>
<hr>
<div class="col_12">
<h3 id="download">下載</h3><br>
<a href="src/foxmosatalks-v2.js" class="btn btn-default btn-lg download" target="_blank" download="foxmosatalks-v2.js">foxmosatalks-v2.js</a>
<p>
通通都放在 Github，請自取，<a href="https://github.com/orinx/foxmosa-toldyou" target="_blank">按這裡前往 Github</a><br>歡迎任意使用或更改原始碼，本專案採用 <a href="https://github.com/orinx/foxmosa-toldyou/kp/blob/gh-pages/LICENSE">BSD 授權</a>
</p>
</div>
<hr>
<div class="col_12">
<h3 id="history">更新紀錄</h3>
<div class="panel panel-default">
<ul class="list-group">
<li class="list-group-item">
<span class="label label-info">ver 1.0</span> 剛從 <a href="https://github.com/goooooooogle/kp" target="_blank">柯 P 滑出來對你說政見</a> 中 Fork 過來，什麼都還沒改 XD
</li>
</ul>
<a name="firefox-addon"></a>
</div>
</div>
<hr>
<div class="col_12">
<h3 id="about">關於作者</h3>
這個專案是 Fork <a href="https://github.com/goooooooogle/kp" target="_blank">柯 P 滑出來對你說政見</a>而來的！目前沒有改太多東西，歡迎大家多多跳坑做一個 <a href="https://github.com/orinx/foxmosa-toldyou/" target="_blank">MozTW 的版本</a> ;P </div>
</div>
<script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="src/foxmosatalks-v2.js" type="text/javascript"></script>
<script src="hc-sticky.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$.foxmosatalks();
$('.go-anchor').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$('#main-nav').hcSticky({
top: 100
});
});
</script>
</body>
</html>