jTicker-製造出「打字」風格的jQuery外掛

10 / 31, 2012 JS , 架站技巧

有很仔細看過打字時電腦的樣子嗎?是不是每個字都是一個一個慢慢跑出來(阿不然要全部自己跳出來嗎?),但是顯示文件或網頁時,就會全部同時跑出來(除非你電腦太爛),現在有了一個jQuery外掛,可以為你的網站加上這種「打字」風格,而且沒有很難,還可以當做跑馬燈來用呢!


官網:http://webdev.stephband.info/jticker/(已失連,因為作者以不再提供更新)
下載:http://s3131212.com/download.php?s=jTicker.zip
打開「js」資料夾中的「jquery.jticker.js」,並找到文件最末端找到以下程式碼

rate: 40, // 打字機出字的速度
delay: 2000, // 自動播放時訊息與訊息中的間隔時間

就按照上面註解的方式修改,單位是毫秒,1000毫秒=1秒
註:基本上照預設值就好
接著找到demo.html,找到以下程式碼

#ticker .cursor {
display: inline-block;
background: red;
width: 7px;
height: 15px;
text-align: center;
/**打字機游標預設的樣式可從此處設定**/

這是預設游標的css,可自由更改
然後再找到以下程式碼

// 這裡是控制樣式的地方,不會用到的話就刪除
 $(".style").click(function(){
$("#ticker").trigger({
type: "control",
cursor: $("#ticker").data("ticker").cursor.css({
width: 10,
background: "blue"
//變更樣式後打字機游標的樣式從這裡設定
 })
});
returnfalse;
});

以上就是第二種樣式的css,一樣可以自由更改,如果不想用這個功能就把它刪除(刪除後記得也要把控制區域的「改變樣式」按鈕刪除)
新增訊息請按照以下程式碼

<div>
<h3>標題</h3>
<p>內文</p>
<a class="next" href="#">下一頁</a>
</div>

註:如果內文要改成條列式,請用<ul>和<il>來製作
最後的成果展示:
jTicker成果展示