簡介
一張圖勝過千言萬語，對不起我懶惰 XD
在安裝「小莎滑出來推你坑」之後 ... 我震驚了
當您在的網頁中安裝了「小莎滑出來推你坑」Plugin 之後，神奇的事情發生了
到訪者進入您的頁面、並捲動到頁面底端之後，小莎就會 滑 出 來 對 他 們 推 坑 ！
每次的瀏覽，都會從 MozTW - Mozilla 台灣社群 中隨機的取得一個坑，來對瀏覽者說明。尚未完成
如何安裝
步驟 1 : 請先在您的網頁中，引用 jquery，如果已經有了，可省略此步驟
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
步驟 2 : 請在您的網頁中 <head> ... </head> 內，引用下方 CSS
<link rel="stylesheet" href="http://orinx.github.io/foxmosa-toldyou/src/foxmosa-v2.css">
步驟 3 : 請在您的網頁中，緊鄰 </body> 結束標記之前，引用下方 JS
<script src="http://orinx.github.io/foxmosa-toldyou/src/foxmosatalks-v2.js"></script> <script>$.foxmosatalks();</script>
參數設定
滑進滑出還不夠！給想更進一步探索這個神奇世界的你
| Option | Value |
|---|---|
| api | API 來源網址 |
| image | 圖片網址，可設定 單張 或 多張圖片，設定多張圖片請用 array 包住 預設： ['http://orinx.github.io/foxmosa-toldyou/img/foxmosa-gift.png', |
| height | 圖片高度 預設： 450 |
| width | 圖片寬度 預設： 466 |
| effect | 出場效果，可選參數：default, fast, slow, veryslow, jump, sneaky預設： default |
| popup_effect | 對話框出現效果，可選參數：default, fade, slide, zoom預設： fade |
| popup_radius | 對話框圓角 預設： 8px |
| popup_color | 對話框文字顏色 預設： black |
| popup_bgcolor | 對話框背景顏色 預設： beige |
| readmore_color | 了解更多連結顏色 預設： brown |
| comein_position | 設定出場的位置時機，數值範圍：0 ~ 100，以頁面捲動的百分比計算例如設定為 50 ，表示捲動至頁面高度之 50% 後，顯示預設： 80 |
| default_text | 對話框預設文字 預設： 你好，我是小莎 >/////< |
| enter_from | 設定從左側或右側出場，可選參數：left,right預設： left |
| enter_distance | 設定出場後，與邊界的距離 預設： -130 |
使用範例一
CODE
$.foxmosatalks({
image: [
'../img/foxmosa-gift.png',
'../img/foxmosa-reddino.png' // 設定為多張圖片
],
width: 800,
height: 774,
effect: 'jump',
popup_effect: 'zoom',
default_text: '哈囉，我是小莎，大家都說我是 MozTW 的吉祥物！希望大家多多來 MozTW 陪我玩'
});
使用範例二
CODE
$.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
});
更新紀錄
- ver 1.0 剛從 柯 P 滑出來對你說政見 中 Fork 過來，什麼都還沒改 XD