作者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