簡介
一張圖勝過千言萬語，對不起我懶惰 XD
在安裝「SITCON 娘滑出來推你坑」之後 ... 我震驚了
當您在的網頁中安裝了「SITCON 娘滑出來推你坑」Plugin 之後，神奇的事情發生了
到訪者進入您的頁面、並捲動到頁面底端之後，SITCON 娘就會 滑 出 來 對 他 們 推 坑 ！
每次的瀏覽，都會從 SITCON - 學生計算機年會 中隨機的取得一個坑，來對瀏覽者說明。尚未完成
如何安裝
步驟 1 : 請先在您的網頁中，引用 jquery，如果已經有了，可省略此步驟
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
步驟 2 : 請在您的網頁中 <head> ... </head> 內，引用下方 CSS
<link rel="stylesheet" href="http://joeangel.github.io/sitcon-toldyou/src/sitcon-v2.css">
步驟 3 : 請在您的網頁中，緊鄰 </body> 結束標記之前，引用下方 JS
<script src="http://joeangel.github.io/sitcon-toldyou/src/sitcontalks-v2.js"></script> <script>$.sitcontalks();</script>
參數設定
滑進滑出還不夠！給想更進一步探索這個神奇世界的你
| Option | Value |
|---|---|
| api | API 來源網址 |
| image | 圖片網址，可設定 單張 或 多張圖片，設定多張圖片請用 array 包住 預設： ['http://joeangel.github.io/sitcon-toldyou/img/sitcon-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 | 對話框預設文字 預設： 你好，我是 SITCON 娘 >/////< |
| enter_from | 設定從左側或右側出場，可選參數：left,right預設： left |
| enter_distance | 設定出場後，與邊界的距離 預設： -130 |
使用範例一
CODE
$.sitcontalks({
image: [
'../img/sitcon-gift.png',
'../img/sitcon-reddino.png' // 設定為多張圖片
],
width: 800,
height: 774,
effect: 'jump',
popup_effect: 'zoom',
default_text: 哈囉，我是 SITCON 娘，大家都說我是 SITCON 的吉祥物！希望大家多多來 SITCON.org 陪我玩;
});
使用範例二
CODE
$.sitcontalks({
image: '../img/sitcon-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 剛從 小莎滑出來推你坑 中 Fork 過來，什麼都還沒改 XD