顯示廣告
隱藏 ✕
看板 Knuckles_note
作者 Knuckles(阿德)
標題 [轉錄] Re: 新增貼上BBS色彩圖的方法
時間 2010年01月28日 Thu. AM 03:25:31


※ 本文轉錄自 DISP_BBS 看板

看板 DISP_BBS
作者 Knuckles(阿德)
標題 Re: 新增貼上BBS色彩圖的方法
時間 2009年12月05日 Sat. AM 02:37:13


本來的閃礫字的做法是利用CSS的
text-decoration:blink;
做出來的,可是這個效果只有用FireFox才看的到 囧

想說用javascript來模擬閃礫的效果
結果發現困難重重 ><
網路上有找到一些方法
不過那些都是會連背景一起閃礫...

BBS的閃礫字是像這樣 閃礫
每秒鐘字體的顏色會變成背景的顏色,過一秒再變回來

花了一整天,還是寫不出來
實在是因為JavaScript還不是很熟
後來受不了還跑去PTT AJAX板問

本來有想到一個折衷的辦法是
字跟背景分開
<span class="blink" style="position:absolute;">閃礫</span><span>    </span>

再利用 jQuery以及 setTimeout() 來切換字的 none 及 inline 兩種顯示模式
$(".blink").css("display","none");
$(".blink").css("display","inline");

不過後來看到 AJAX 板有一位 tomin 回答了個更好的方法
我再修改一下後,像這樣:

$(function(){
	
blinkIn();
});

function blinkIn(){
	
$(".blink").each(function(){
	
	
$(this).css("color", $(this).css("background-color") );
	
})
	
setTimeout("blinkOut()",1000);
}
function blinkOut(){
	
$(".blink").each(function(){
	
	
$(this).css("color","");
	
})
	
setTimeout("blinkIn()",1000);
}

要閃礫的字就在class加上blink就好了
<span class="blink">閃礫</span>

所以又重新寫了一下....
就這樣搞了一整天 囧
--
※ 來源: DISP BBS (http://disp.twbbs.org)
※ 作者: Knuckles  來自: 114.43.114.221  時間: 2009-12-05 02:37:13
※ 編輯: Knuckles  來自: 114.43.114.221  時間: 2009-12-05 02:38:12

--
※ 來源: DISP BBS (http://disp.twbbs.org)
※ 作者: Knuckles  來自: 114.43.113.83  時間: 2010-01-28 03:25:31
※ 看板: KnucklesNote 文章推薦值: 3 目前人氣: 0 累積人氣: 2013 
※ 本文也出現在看板: JavaScript
( ̄︶ ̄)b chris, bake088, KSar 說讚!
Knuckles 轉錄至看板 JavaScript (使用連結) 時間:2012-02-14 10:27:01
11-25 10:59 TW
a11643:[自己刪除]
11-25 10:59 TW
a11643:[自己刪除]
11-25 11:02 TW
a11643:[自己刪除]
11-25 11:06 TW
a11643:[自己刪除]
11-25 11:07 TW
a11643:[自己刪除]
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇
看板名稱: 確定(Enter) 取消(Esc) 搜尋(Space)
查詢帳號: 確定(Enter) 取消(Esc) 搜尋(Space)
搜尋: m)m文 b)進板 c)未分類 a)作者 /)標題 q)取消?[q]

搜尋 送出(Enter) 取消(Esc)

回覆文章至: f)看板 m)作者信箱 b)兩者皆是 q)取消?[f]
要引用原文嗎? y)引用原文 n)不引用 a)全部回覆 r)複製原文 q)取消?[y]
轉錄本文章於看板: 1)使用連結 2)使用複製 q)取消 ?[1]
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
轉寄至站內信箱於使用者: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc)
修改文章標題為: 確定(Enter) 取消(Esc) 全部(a)

確定要刪除這篇文章?(可按大U救回) 確定(Enter) 取消(Esc)

刪除理由:

確定(Enter) 取消(Esc)
加到這個分類: 確定(Enter) 下一層(→) 回上層(←) 取消(Esc)
你覺得這篇文章: 1)真讚 2)真瞎 q)取消?[1] (再選一次即可收回)
你覺得這篇文章: 1)值得推薦 2)表示反對 3)單純註解 q)取消?[3]
guest
預覽(Enter) 取消(Esc)
上傳圖片
按ctrl+Enter可輸入下一行。
guest
確定要送出? 確定(Enter) 取消(Esc) 繼續(e)
搜尋: 送出(Enter) 取消(Esc)

▏▎▍▌▋▊▉ 請按任意鍵繼續