转载--博客技巧

阿坏教你妆点博客，建设品位家园

Posted on 2006-04-24 20:20 我是坏女生

咳，在此呢，我又要说一下废话了，其实在很早之前，就有收集博客代码的习惯，逐渐就积累了很多博客的装扮技巧，很多时候别人进来我这里做客时，会问这样那样的关于博客代码的问题，有时候，太多人问了，我觉得挨个回答有点麻烦，还不如写个东西出来供大家自行学习更好。不过一直都没有这个恒心去做，于是，就懒了下来：（

现在作为博客生活这个大家庭中的管理员，我就该以身作则，为大家服务。早前也有个博客用户提醒了我，让我收集一下经常会碰到的关于博客代码的问题，做个索引，好让大家自行查阅，也免去了私下留言，邮件往返的麻烦。因此，就成就了我这篇问题集的出现，呵呵。

我只能把我知道的放这里，如果有其他特殊的问题，欢迎大家给我的邮箱留言：kid0030@126.com，如果我没有及时回复大家，请大家耐心等待，不过我每天都会看邮箱的，所以应该能在24小时内给与答复：）

好啦，进入正题吧，先在这里做个目录，方便大家在这里查找，不用挨个问题去翻。

一、技巧篇
1.如何给你的博客添加背景音乐
2.如何给你的博客添加透明FLASH
3.如何修改你的博客背景
4.如何让你的鼠标指针个性化
5.如何在公告栏里添加图片
6.滚动条配色代码
7.漂亮的时钟代码特效
8.各种博客效果代码推荐：
1〉跟随鼠标的还会闪烁的星星
2〉音乐光环
3〉跟随鼠标的星星
4〉动力光环
5〉在鼠标后面跟着一串飘动的字符
6〉鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明
7〉跟着鼠标的字
8〉让你的鼠标指针变成一个小十字
9〉坐标式鼠标
10〉逐次出现的状态栏字
11〉状态栏的字从右向左飘
12〉固定不变的状态栏
13〉状态栏的字逐个从右向左飞出
14〉状态栏的字像打字一样出现再消失
15〉闪烁的状态栏的字
16〉状态栏访客停留时间
17〉状态栏像波纹一样的字

二、资源篇
1.透明FLASH资源
2.在线CSS编辑器
3.通用滚动条配色工具

内容：
一、技巧篇
1.如何给你的博客添加背景音乐
只需把以下代码复制到你的后台管理——选项——CONFIGURE——公告栏即可

贴rm,ra,ram格式的音乐，代码如下：
<embed width="0" height="0" type="audio/x-pn-realaudio-plugin" autostart="true" controls="ControlPanel" src="你的音乐连接地址";></embed>

贴midi,asf,wma,asx格式的音乐，代码如下：
<embed autostart="true" loop="-1" controls="ControlPanel" width="0" height="0" src="你的音乐连接地址";></embed>

贴mp3格式的音乐，代码如下：
<EMBED src="你的音乐连接地址" type="audio/mpeg " controls="ControlPanel" width="0" height="0" loop="true" autostart="true"></embed>

loop表示循环数，-1表示始终循环，autostart表示自动播放，若为true表示自动播放，若为false则为手动播放。
这里要注意的是，你的音乐连接地址，必须是有效的网络地址，并非在线试听的地址。百度的搜索引擎就提供很多有效的网络地址，建议尽量在那里搜索。

如果要隐藏播放器，代码如下：
<embed src="你的音乐连接地址" hidden autostart="true" loop="true"></embed>

网上还有一些播放器的代码，直接在网上注册各种播放器，就可以复制所给出的代码，也是放到同样的地方即可。这里就不作详细介绍了啊。

2.如何给你的博客添加透明FLASH
当你进入一个博客看到一些飘落的雪花啊，落叶啊，游动的金鱼，雨滴啊什么的，这些就是透明FLASH效果。要添加这样的效果也很简单，只需要进入你的后台管理——选项——CONFIGURE——公告栏，把代码复制到这里即可。

透明FLASH网上有很多，可以搜索一下，直接把地址帖过来这个代码里面就可以。

3.如何修改你的博客背景
这个比较大篇幅，所以请点击这里进入学习。

4.如何让你的鼠标指针个性化
你也看到过一些博客的鼠标图案非常个性化，可以是小老鼠啦、水滴啦等等图案，有静态的也有动态的。只需把以下代码复制到你的后台管理——选项——CONFIGURE——公告栏即可。
这些效果的代码如下：
<style>

</style>

把你的鼠标图案的网上连接地址换到指针文件地址去就可以了哇~~~~~记住是网上的地址哦，如果直接复制自己本地电脑里面的路径上去是不行的。如果没有网络空间，那么可以到以下地址上传你的鼠标指针图案：ht tp://bzwaltz.w1.net.cn/upload/upload.asp(有人举报此网址有木马，未验证，故在http中间插入了一空格。访问者请自己小心。）

5.如何在公告栏里添加图片
把如下代码放到公告栏即可：
<IMG height=176 src="图片连接地址" width=150 border=0>
其中height是图片的高度，width是图片的宽度，要调好图片大小，注意不要让你的博客首页变形哦~~~

6.滚动条配色代码
把如下代码放到公告栏即可：
<STYLE type=text/css>
body
{
scrollbar-face-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-base-color: #ffffff;
scrollbar-dark-shadow-color: #000000;
}
</STYLE>
那些#+数字是颜色代码，如果要配色，可以到这里查找你喜欢的颜色：http://www.ezhy.com/zhiyong/color.htm

7.漂亮的时钟代码特效
<CENTER><EMBED height=130 src=http://www.59178.com/Twins/Twins07.swf style="HEIGHT: 130px; WIDTH: 144px" type=application/octet-stream width=144></CENTER>

只要将上面代码中FLASH地址里的“07”改为“01”到“08”中随便一个数字就可以实现8种其他的时钟代码效果。

8.各种博客效果代码推荐（这些代码全部只需要复制到后台管理——选项——CONFIGURE——公告栏即可。）另外还可以从网上找到很多效果代码，只要耐心搜索一下，会发现其实还有很多很多代码，我并没有整理出来。

1〉跟随鼠标的还会闪烁的星星
<SCRIPT language=JavaScript>
<!--
if (document.all){
//To add more stars simply add more colours in below array!!
colours=new Array('ff0000','00ff00','3366ff','ff00ff','ffa500','ffffff','fff000')

//Alter nothing below!!
amount=colours.length;
YgetDelay=0,XgetDelay=0,Ydelay=0,Xdelay=0,step=0.2,currStep=0,my=0,mx=0;
document.write('<div id="ie" style="position:absolute;top:0;left:0;"><div style="position:relative">');
for (i=0; i < amount; i++)
document.write('<div id="iestars" style="position:absolute;top:0px;left:0px;height:50px;width:50px;font-family:Courier New;font-size:5px;color:'+colours[i]+';padding-top:20px;text-align:center">.</div>');
document.write('</div></div>');
ini=1;
gstep=1;
function iMouse(){
my=event.y;mx=event.x;
}
document.onmousemove=iMouse
function dim(){
ini-=gstep;
dt=setTimeout('dim()',10);
if (ini < 2){
clearTimeout(dt);
glow();
}
}
function glow(){
ini+=gstep;
gt=setTimeout('glow()',10);
if (ini > 14){
clearTimeout(gt);
dim();
}
}
function stars(){
ie.style.top=document.body.scrollTop;
for (i=0; i < amount; i++)
{
var layer=iestars[i].style;
layer.filter='glow(color='+colours[i]+', strength='+ini+')';
layer.top= Ydelay+100*Math.sin((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
layer.left=Xdelay+180*Math.cos((5*Math.sin((currStep-15.99)/10))+i*70)*Math.sin((currStep)/10)*Math.cos((currStep+i*25)/10);
}
currStep+=step;
}
function delay(){
Ydelay = YgetDelay+=(my-YgetDelay)*1/20;
Xdelay = XgetDelay+=(mx-XgetDelay)*1/20;
stars();
setTimeout('delay()',10);
}
delay();
glow();
}
//-->
</SCRIPT>

2〉音乐光环
<SCRIPT LANGUAGE="JavaScript">
ns = (document.layers)?1:0;
Clrs = new Array ('ff0000','00ff00','ffffff','ff00ff','ffa500','ffff00',' 00ff00','ffffff','ff00ff')
yBase = 0;
xBase = 0;
step = 3;
currStep = 0;
Ypos = 0;
Xpos = 0;
if (ns){
for (i = 0; i < 14; i++)
document.write('<LAYER NAME="n'+i+'" LEFT=0 TOP=0 CLIP="0,0,'+i/4+','+i/4+'"></LAYER>');
window.captureEvents(Event.MOUSEMOVE);
function nMouse(evnt){
Ypos = evnt.pageY;
Xpos = evnt.pageX;
}
window.onMouseMove = nMouse;
}
else{
document.write('<div style="position:absolute;top:0;left:0"><div style="position:relative">');
for (i=0; i < 14; i++)
{document.write('<div id="me" style="position:absolute;top:0;left:0;width:'+i/4+';heig ht:'+i/4+';font-size:'+i/4+'"></div>')}
document.write('</div></div>');
function iMouse() {
Ypos = event.y+document.body.scrollTop;
Xpos = event.x+document.body.scrollLeft;
}
document.onmousemove = iMouse;
}
function Comet() {
var yBase = (document.layers)? window.innerHeight/4:window.document.body.clientHeight/4 ;
var xBase = (document.layers)? window.innerWidth/4:window.document.body.clientWidth/4;
for (i = 0; i < 14; i++){
var randCol = Math.round(Math.random()*8);
var layer = (document.layers)?document.layers['n'+i]:me [i].style;
layer.top =Ypos + yBase*Math.cos((currStep+i*4)/12) *Math.cos(0.7+currStep/200);
layer.left = Xpos + xBase*Math.sin((currStep+i*3)/10) *Math.sin(8.2+currStep/400);
if (ns) layer.bgColor = Clrs[randCol];
else
layer.background = Clrs[randCol];
}
currStep += step;
setTimeout("Comet()",10);
}
window.onload = Comet;
</script>

3〉跟随鼠标的星星
<script>
/*
Scrolling Image Map/Text Link Tooltip Script-
Special Thanks t Rob(http://rob.yeah.net)
Miss Ann(http://annworld.126.com)
*/

if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

}
function YY_Mousetrace(evnt) { //v1.2 copyright (c)1999 Yaromat
if (yyns4)
{if (evnt.pageX) {yy_ml=evnt.pageX; yy_mt=evnt.pageY;} }
else{
   yy_ml=(event.clientX + document.body.scrollLeft);
   yy_mt=(event.clientY + document.body.scrollTop);
}
if (yy_tracescript)eval(yy_tracescript)
}
</script>
<script language="JavaScript">
function PopWin()
{
var PopWin = window.open("new.htm","PopWin","toolbar=no,directries=no,scrollBars=yes,height=350,width=400");
}
</script>
      <div id="tooltip2"
style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow">
        <layer name="nstip" width="1000px" bgcolor="lightyellow"> </layer>
      </div>
      <div id="yyd0"
style="position:absolute; left:10px; top:50px; width:3px; height:3px; z-index:1; background-color: #19636c; layer-background-color: #19636c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd1"
style="position:absolute; left:20px; top:50px; width:3px; height:3px; z-index:1; background-color: #708574; layer-background-color: #708574; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd2"
style="position:absolute; left:30px; top:50px; width:3px; height:3px; z-index:1; background-color: #379bbf; layer-background-color: #379bbf; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd3"
style="position:absolute; left:40px; top:50px; width:3px; height:3px; z-index:1; background-color: #25184c; layer-background-color: #25184c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd4"
style="position:absolute; left:50px; top:50px; width:3px; height:3px; z-index:1; background-color: #31bd3c; layer-background-color: #31bd3c; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
      <div
id="yyd5"
style="position:absolute; left:60px; top:50px; width:3px; height:3px; z-index:1; background-color: #c11efd; layer-background-color: #c11efd; border: 1px none #000000; clip: rect(0 3 3 0)"></div>
        <script>
var yyns4=window.Event?true:false; var yy_mt = 0; var yy_ml = 0;
document.onmousemove = YY_Mousetrace;
yy_tracescript = '';

if (yyns4){ document.captureEvents(Event.MOUSEMOVE);
YY_Mousetrace('',',document.YY_Mousetrace1')}

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/39.83007847812662))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/34.224861639800686))+0)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd0\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/27.66510707209673))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/9.240632767417667))+30)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd1\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/16.45318944579641))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/16.0564452288292))+60)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd2\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/6.95348954836835))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/44.13697049887155))+90)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd3\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/33.90077294583733))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/2.2378828869411587))+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd4\']',2000,true,80,0,1);

YY_Layerfx(0,0,'yy_ml+cos((15*sin(yycnt/37.858312521039835))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','yy_mt+sin((15*sin(yycnt/18.083839795990098))+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','document.layers[\'yyd5\']',2000,true,80,0,1);
</script>
<script>
/*
Scrolling Image Map/Text Link Tooltip Script-
Special Thanks t Rob(http://rob.yeah.net)
Miss Ann(http://annworld.126.com)
*/

if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

4〉动力光环
<style type="text/css">
Begin CSS
#a { position: absolute; top: 10px; left: 10px; visibility: visible }
#b { position: absolute; top: 10px; left: 10px; visibility: visible }
#c { position: absolute; top: 10px; left: 10px; visibility: visible }
#d { position: absolute; top: 10px; left: 10px; visibility: visible }
#e { position: absolute; top: 10px; left: 10px; visibility: visible }
#f { position: absolute; top: 10px; left: 10px; visibility: visible }
#g { position: absolute; top: 10px; left: 10px; visibility: visible }
End CSS{ }
</style>
<layer name="a0" left=10 top=10 visibility=show bgcolor="#ff0000" clip="0,0,2,2"></layer>
<layer name="a1" left=10 top=10 visibility=show bgcolor="#ff8000" clip="0,0,2,2"></layer>
<layer name="a2" left=10 top=10 visibility=show bgcolor="#ffff00" clip="0,0,2,2"></layer>
<layer name="a3" left=10 top=10 visibility=show bgcolor="#00ff00" clip="0,0,2,2"></layer>
<layer name="a4" left=10 top=10 visibility=show bgcolor="#0000ff" clip="0,0,2,2"></layer>
<layer name="a5" left=10 top=10 visibility=show bgcolor="#ff00ff" clip="0,0,2,2"></layer>
<layer name="a6" left=10 top=10 visibility=show bgcolor="#ffffff" clip="0,0,2,2"></layer>
<div id="starsDiv" style="position:absolute;top:0px;left:0px">
<div style="position:relative;width:2px;height:2px;background :#ffffff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#ffff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#ffa000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#ff0000;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#00ff00;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#0000ff;font-size:2px;visibility:visible"></div>
<div style="position:relative;width:2px;height:2px;background :#FF00FF;font-size:2px;visibility:visible"></div>
</div>
<script language="JavaScript">
if (document.layers) {
window.captureEvents(Event.MOUSEMOVE);
}
var yBase = 200;
var xBase = 200;
var yAmpl = 10;
var yMax = 40;
var step = .2;
var ystep = .5;
var currStep = 0;
var tAmpl=1;
var Xpos = 1;
var Ypos = 1;
var i = 0;
var j = 0;
if (document.all) {
function MoveHandler(){
Xpos = document.body.scrollLeft + event.x;
Ypos = document.body.scrollTop + event.y;
}
document.onmousemove = MoveHandler;
}
else if (document.layers) {
function xMoveHandler(evnt) {
Xpos = evnt.pageX;
Ypos = evnt.pageY;
}
window.onMouseMove = xMoveHandler;
}
function animateLogo() {
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
else if (document.layers) {
yBase = window.innerHeight / 4;
xBase = window.innerWidth / 4;
}
if (document.all) {
for (i = 0 ; i < starsDiv.all.length; i++) {
starsDiv.all[i].style.top = Ypos + Math.cos ((20*Math.sin(currStep/20))+i*70)*yBase*(Math.sin (10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
starsDiv.all[i].style.left = Xpos + Math.sin ((20*Math.sin(currStep/20))+i*70)*xBase*(Math.sin (10+currStep/10)+0.2)*Math.cos((currStep + i*25)/10);
}
}
else if (document.layers) {
for (j = 0; j < 7; j++) { //7 is number of NS layers!
var templayer="a" + j;
document.layers[templayer].top = Ypos + Math.cos ((20*Math.sin(currStep/20))+j*70)*yBase*(Math.sin (10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
document.layers[templayer].left =Xpos + Math.sin ((20*Math.sin(currStep/20))+j*70)*xBase*(Math.sin (10+currStep/10)+0.2)*Math.cos((currStep + j*25)/10);
}
}
currStep += step;
setTimeout("animateLogo()", 10);
}
animateLogo();
</script>

5〉在鼠标后面跟着一串飘动的字符
<head><style type="text/css">
.spanstyle {
COLOR:#0099FF; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</style>
<script>
var x,y
var step=18
var flag=0
// Your snappy message. Important: the space at the end of the sentence!!!
var message="★换成你想要的字！"
message=message.split("")
var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-200
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
     for (i=message.length-1; i>=1; i--) {
      xpos[i]=xpos[i-1]+step
   ypos[i]=ypos[i-1]
     }
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
      var thisspan = eval("span"+(i)+".style")
      thisspan.posLeft=xpos[i]
   thisspan.posTop=ypos[i]
     }
}

else if (flag==1 && document.layers) {
     for (i=message.length-1; i>=1; i--) {
      xpos[i]=xpos[i-1]+step
   ypos[i]=ypos[i-1]
     }
xpos[0]=x+step
ypos[0]=y

for (i=0; i<message.length-1; i++) {
      var thisspan = eval("document.span"+i)
      thisspan.left=xpos[i]
   thisspan.top=ypos[i]
     }
}
var timer=setTimeout("makesnake()",30)
}

</script></head>
<body onload="makesnake()">
<script>
<!-- Beginning of JavaScript -

for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script></body>

6〉鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明
<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">
<layer name="nstip" width=1000px bgColor="seashell"></layer>
</div>
<SCRIPT language="JavaScript">
<!--
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
//-->
</SCRIPT>
<a href=# onMouseOver="showtip2(this,event,'叫你放你就放，真乖！~~')" onMouseOut="hidetip2()">把鼠标放上来试试</a>

7〉跟着鼠标的字
<SCRIPT language=javascript>
var cx=0;
var cy=0;
var val=0;
function locate()
{        cx=window.event.x;
        cy=window.event.y;
}
document.onmousemove=locate;
function follow(i)
{        var x;
        if(i<4)x=cx-50+i*10;
        else x=cx-25+i*10;
        var y=cy-20+Math.floor(Math.random()*40);
        w=eval("word"+i);
        with(w.style)
        {
        left=x.toString()+"px";
        top=y.toString()+"px";
        }
}
function show(i)
{
        var w=eval("word"+i);
        with(w.style)
        {
        visibility="visible";
        s=parseInt(fontSize);
        if(s>=200)s-=100;
        else if(s>90&&s<=100)
                {
                s-=85;
                clearInterval(val);
                if(i<5)val=setInterval("show("+(i+1)+")",20);
                }
        fontSize=s;
        }
}
function start()
{        for(i=1;i<=5;i++)
        {
        val=setInterval("show(1)",20);
        setInterval("follow("+i+")",100);

        }
}
</SCRIPT>
<SCRIPT language=javascript>
        var word=new Array(5);
word[1]="爱";word[2]="你";word[3]="一";word[4]="万";word[5]="年";
        for(i=1;i<=5;i++)
                document.write("<div id='word"+i+"' style='width:20px;height:20px;position:absolute;font-size:1000;visibility:hidden'><font face='Forte' color='#FF00FF'>"+word[i]+"</font></div>");start();
        </SCRIPT>

8〉让你的鼠标指针变成一个小十字
<SCRIPT language=JavaScript>

</SCRIPT>

9〉坐标式鼠标
<head>
<style>

</style></head>
<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>

if (document.all&&!window.print){
leftright.style.width=document.body.clientWidth-2
topdown.style.height=document.body.clientHeight-2
}
else if (document.layers){
document.leftright.clip.width=window.innerWidth
document.leftright.clip.height=1
document.topdown.clip.width=1
document.topdown.clip.height=window.innerHeight
}

function followmouse1(){
//move cross engine for IE 4+
leftright.style.pixelTop=document.body.scrollTop+event.clientY+1
topdown.style.pixelTop=document.body.scrollTop
if (event.clientX<document.body.clientWidth-2)
topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1
else
topdown.style.pixelLeft=document.body.clientWidth-2
}

function followmouse2(e){
//move cross engine for NS 4+
document.leftright.top=e.y+1
document.topdown.top=pageYOffset
document.topdown.left=e.x+1
}

if (document.all)
document.onmousemove=followmouse1
else if (document.layers){
window.captureEvents(Event.MOUSEMOVE)
window.onmousemove=followmouse2
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
setTimeout("window.onresize=regenerate",400)
}
if ((document.all&&!window.print)||document.layers)
//if the user is using IE 4 or NS 4, both NOT IE 5+
window.onload=regenerate2

//-->
</script>

10〉逐次出现的状态栏字
<head>
<SCRIPT LANGUAGE=JAVASCRIPT>

</SCRIPT></head>
<BODY onload=startBanner()>

11〉状态栏的字从右向左飘
<script>
function scrollit_r2l(seed)
{ var m1 = "你要的字 " ;
var m2 = " 你要的字" ;
       var msg=m1+m2;
       var out = " ";
       var c = 1;
var speed = 100
if (seed > 100)
{                seed-=2;
                var cmd="scrollit_r2l(" + seed + ")";
             timerTwo=window.setTimeout(cmd,speed);}
    else if (seed <= 100 && seed > 0)
     {                for (c=0 ; c < seed ; c++)
                      {       out+=" ";}
       out+=msg;         seed-=2;
   var cmd="scrollit_r2l(" + seed + ")";
   window.status=out;
timerTwo=window.setTimeout(cmd,speed); }
      else if (seed <= 0)
{                if (-seed < msg.length)
                  {
                       out+=msg.substring(-seed,msg.length);
                       seed-=2;
                       var cmd="scrollit_r2l(" + seed + ")";
                       window.status=out;
       timerTwo=window.setTimeout(cmd,speed);}
       else {               window.status=" ";
                 timerTwo=window.setTimeout("scrollit_r2l(100)",speed);
}
}
}
scrollit_r2l(100);
// -- End of JavaScript code -->
</script>

12〉固定不变的状态栏
<body onmouseover="self.status='你要的字';return true">

13〉状态栏的字逐个从右向左飞出
<script language="JavaScript">
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i     = 0
this.reset = clearMessage
}
function clearMessage() {
this.pos = POSITION
}
var POSITION = 100
var DELAY    = 5
var MESSAGE = "你要的字 "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
    scroll.out += " "
}
if (scroll.pos >= 0)
   scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
   scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
    {out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
    {out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
    position++
    if (msg.charAt(position) == ' ')
      {position++ }
    jumpSpaces = 100-position
} else if (jumpSpaces > 3)
       {jumpSpaces *= .75}
else
    {jumpSpaces--}
if (position != msg.length) {
    var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
    scrollID = window.setTimeout(cmd,scroll.delay);
} else {
    window.status=""
    jumpSpaces=0
    position=0
    cmd = "snapIn(" + jumpSpaces + "," + position + ")";
    scrollID = window.setTimeout(cmd,scroll.delay);
    return false
}
return true
}
snapIn(100,0);
// -->
</script>

14〉状态栏的字像打字一样出现再消失
<body onLoad="scrollIn()">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

15〉闪烁的状态栏的字
<body onLoad="flash()">
<script language="">

</script>

16〉状态栏访客停留时间
<SCRIPT>

    var Temp;
    var TimerId = null;
    var TimerRunning = false;

    Seconds = 0
    Minutes = 0
    Hours = 0

    function showtime()
    {
      if(Seconds >= 59)
      {
        Seconds = 0
        if(Minutes >= 59)
        {
          Minutes = 0
          if(Hours >= 23)
          {
            Seconds = 0
            Minutes = 0
            Hours = 0
          }
          else {
            ++Hours
          }
        }
        else {
          ++Minutes
        }
      }
      else {
        ++Seconds
      }

      if(Seconds != 1) { var ss="s" } else { var ss="" }
      if(Minutes != 1) { var ms="s" } else { var ms="" }
      if(Hours != 1) { var hs="s" } else { var hs="" }

      Temp = '親愛.. 妳停留勒 '+Hours+' 小时'+', '+Minutes+' 分'+', '+Seconds+' 秒'+''
      window.status = Temp;
      TimerId = setTimeout("showtime()", 1000);
      TimerRunning = true;
    }

    var TimerId = null;
    var TimerRunning = false;

    function stopClock() {
      if(TimerRunning)
        clearTimeout(TimerId);
        TimerRunning = false;
    }

    function startClock() {
      stopClock();
      showtime();
    }

    function stat(txt) {
      window.status = txt;
      setTimeout("erase()", 2000);
    }

    function erase() {
      window.status = "";
    }

</SCRIPT>
<body onLoad="startClock()">

17〉状态栏像波纹一样的字
<SCRIPT language=JavaScript><!--
var text = "要的字"
var speed = 50

var x = 0

function bb() {

var a = text.substring(0,x)
var b = text.substring(x,x+1).toUpperCase()
var c = text.substring(x+1,text.length)

window.status = a + b + c

if (x == text.length) {
x = 0
}

else {
x++
}

setTimeout("bb()",speed)
}

bb();
// -->
</SCRIPT>

二、资源篇
1.透明FLASH资源
http://www.wzsj-home.com/flash-sc/touming-flash/flash.htm里面有很多各种各样的效果，可以自行复制该FLASH的地址。

2.在线CSS编辑器
AJAX是一种技术，特点是无刷新，能即时反映效果。作者是一位日本人，用ajax技术实现的CSS在线编辑，实时预览功能，并提供了写成类和直接定义两种代码。能编辑文字，背景，边框，高宽，边距，布局等相关的一些简单效果，对于初学者会很有帮助。首次需要加载的数据很多，网络慢需要耐心等待。
http://www.qrone.org/cssdesigner.html

3.通用滚动条配色工具
http://www.blueidea.com/articleimg/2005/04/2460/scroller.swf

posted on 2006-05-30 13:12 游子阅读(1042) 评论(3) 编辑收藏引用所属分类: 硬件

阿坏教你妆点博客，建设品位家园

常用链接

留言簿(8)

随笔分类(314)

随笔档案(337)

文章分类(7)

文章档案(10)

相册

收藏夹(1)

其它

友情链接

数字电视

生活、旅游

自己的链接

计算机

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜