作者tomin (Schrödinger's cat)
看板Ajax
標題Re: [問題] 模擬BBS的閃礫字
時間Sat Dec 5 00:13:16 2009
※ 引述《knuckles (那克斯)》之銘言：
: 關於我之前做的那個BBS to HTML轉碼器
: 其中閃礫字的做法是利用CSS的
: text-decoration:blink;
: 做出來的
: 可是這個效果只有用FireFox才看的到 囧
: 想說用javascript來模擬閃礫的效果
: 結果發現困難重重 ><
: 網路上有找到一些方法
: 不過那些都是會連背景一起閃礫...
: 我要的是像這樣 閃礫
: 每秒鐘字體的顏色會變成背景的顏色，過一秒再變回來
: 有辦法寫得出來嗎 ^^||
: 我有想到一個折衷的辦法是
: 乾脆再放一個只有背景的字，設為 display:none
: <span class="blink">閃礫</span>
: <span class="blink" style="display:none;"> </span>
: 再利用 jQuery的$(".blink").toggle(); 以及 setTimeout()
: 讓兩個字輪流顯示...
: 不過這樣好像有點笨...想問問有沒有更好的辦法 ^^||
我的寫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blink</title>
<style type="text/css">
body{
background-color:black;
}
.x001{
color:yellow;
background-color:DarkRed;
}
.x002{
color:lightblue;
background-color:green;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript"> google.load("jquery", "1.3"); </script>
<script type="text/javascript">
$(function(){
blink();
});
function blink(){
var seconds=new Date().getSeconds();
if(seconds%2){
blinkIn();
}else{
blinkOut();
}
setTimeout(blink,1000);
}
function blinkIn(){
$(".blink").each(function(){
$(this).css("color", $(this).css("background-color") );
})
}
function blinkOut(){
$(".blink").each(function(){
$(this).css("color","");
})
}
</script>
</head>
<body>
<span class="x001 blink">閃礫</span>
<span class="x002 blink">閃礫閃礫閃礫</span>
</body>
</html>
Google page不能用了 doc也不能上傳網頁
還在找那裡可以放網頁檔案
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.122.30.140
1F：推 PsMonkey:appspot XD 12/05 00:20
3F：推 knuckles:哇 原來 css("color","") 後顏色會變回來 (￣ㄧ￣) 12/05 01:10
4F：→ grence:css("color","")會清空帶瀏覽器預設.如果原本有值會被清掉 12/05 01:44
5F：推 knuckles:原來,我之前一直卡在前景色變背景色後要怎麼變回來 囧 12/05 13:40
7F：→ tomin:先用hinet 但hinet又不能放unicode檔>.< 12/05 16:57