转载阿坏的笔记.留作备用.如何装点博客家园.

转载阿坏的笔记.留作备用.如何装点博客家园.


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

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

我只能把我知道的放这里,如果有其他特殊的问题,欢迎大家给我的邮箱留言: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——公告栏,把代码复制到这里即可。

<embed style="LEFT: 5px; POSITION: absolute; TOP: -20px" align=right src="透明FLASH地址" width=900 height=535 type=application/x-shockwave-flash wmode="transparent" quality="high"></embed>

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

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

4.如何让你的鼠标指针个性化
你也看到过一些博客的鼠标图案非常个性化,可以是小老鼠啦、水滴啦等等图案,有静态的也有动态的。只需把以下代码复制到你的后台管理——选项——CONFIGURE——公告栏即可。
这些效果的代码如下:
<style>
<!--
BODY{cursor:url(指针文件地址); }/* 显示除链接外所有区域的指针样式*/
a {cursor:url(指针文件地址);}/* 显示链接的指针样式 */
-->
</style>

把你的鼠标图案的网上连接地址换到指针文件地址去就可以了哇~~~~~记住是网上的地址哦,如果直接复制自己本地电脑里面的路径上去是不行的。如果没有网络空间,那么可以到以下地址上传你的鼠标指针图案:http://bzwaltz.w1.net.cn/upload/upload.asp

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 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>
<script language="JavaScript">
function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1.2
//copyright (c)1999 Yaromat, Jaro von Flocken
if ((document.layers)||(document.all)){
  with (Math) {yynextx= eval(yyfnx)}
  with (Math) {yynexty= eval(yyfny)}
  yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
  if (document.layers){
    eval(yydiv+".top="+(yynexty+yytop))
    eval(yydiv+".left="+(yynextx+yyleft))
  }
  if (document.all){
    eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
    eval(yydiv+".style.pixelTop="+(yynexty+yytop));
    eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
  }
  argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
  if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}

}
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){

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 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>
        <script language="JavaScript">
function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1.2
//copyright (c)1999 Yaromat, Jaro von Flocken
if ((document.layers)||(document.all)){
  with (Math) {yynextx= eval(yyfnx)}
  with (Math) {yynexty= eval(yyfny)}
  yycnt=(yyloop && yycnt>=yystep*yybilder)?0:yycnt+yystep;
  if (document.layers){
    eval(yydiv+".top="+(yynexty+yytop))
    eval(yydiv+".left="+(yynextx+yyleft))
  }
  if (document.all){
    eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
    eval(yydiv+".style.pixelTop="+(yynexty+yytop));
    eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
  }
  argStr='YY_Layerfx('+yyleft+','+yytop+',"'+yyfnx+'","'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+','+yyto+','+yycnt+','+yystep+')';
  if (yycnt<=yystep*yybilder){eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
}

}
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>

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){

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 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>
<!-- Begin
var x, y, xold, yold, xdiff, ydiff;
var dir = Array();
dir[0]="crosshair";
dir[1]="crosshair";
dir[2]="crosshair";
dir[3]="crosshair";
dir[4]="crosshair";
dir[5]="crosshair";
dir[6]="crosshair";
dir[7]="crosshair";
document.onmousemove = FindXY;
function display(direction){
document.body.style.cursor = dir[direction];
}
function FindXY(loc){
x = (document.layers) ? loc.pageX : event.clientX;
y = (document.layers) ? loc.pageY : event.clientY;
xdiff = x - xold;
ydiff = y - yold
if ((xdiff <  2) && (ydiff < -2)) display(0);
if ((xdiff <  2) && (ydiff >  2)) display(4);
if ((xdiff >  2) && (ydiff <  2)) display(2);
if ((xdiff < -2) && (ydiff <  2)) display(6);
if ((xdiff >  2) && (ydiff >  2)) display(3);
if ((xdiff >  2) && (ydiff < -2)) display(1);
if ((xdiff < -2) && (ydiff >  2)) display(5);
if ((xdiff < -2) && (ydiff < -2)) display(7);
xold = x;
yold = y;
}
//  End -->
</SCRIPT>

9〉坐标式鼠标
<head>
<style>
<!--
#leftright, #topdown{
position:absolute;
left:0;
top:0;
width:1px;
height:1px;
layer-background-color:whtie;
background-color:white;
z-index:100;
font-size:1px;
}
-->
</style></head>
<div id="leftright" style="width:expression(document.body.clientWidth-2)"></div>
<div id="topdown" style="height:expression(document.body.clientHeight-2)"></div>


<script language="JavaScript1.2">
<!--


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>
<!--
function makeArray(n) {
this.length = n;
}
function stopBanner() {
if (bannerRunning)
clearTimeout(timerID);
bannerRunning = false;
}
function startBanner() {
stopBanner();
showBanner();
} function showBanner() {
var text = ar[currentMessage];
if (offset < text.length) {
if (text.charAt(offset) == " ")
offset++;
var partialMessage = text.substring(0, offset + 1);
window.status = partialMessage;
offset++;
timerID = setTimeout("showBanner()", speed);
bannerRunning = true;
} else {
offset = 0;
currentMessage++;
if (currentMessage == arlength)
currentMessage = 0;
timerID = setTimeout("showBanner()", pause);
bannerRunning = true;
}
}
var speed = 100    /* 数越小速度越快 */
var pause = 1000    /* 数越大停顿越长 */
var timerID = null;
var bannerRunning = false;
var currentMessage = 0;
var offset = 0;
var arlength = 3;    /* 字幕的条数 */
var ar = new makeArray(arlength);
ar[0] = "欢迎您光临光之部落!谢谢!";    /* 填入你的信息 */
ar[1] = "请多提意见。";    /* 填入你的信息 */
ar[2] = "本站网址
http://bbs.shineblog.com"    /* 填入你的信息 */
-->
</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">
<!-- Begin
var Message="你要的字";
var place=1;
function scrollIn() {
window.status=Message.substring(0, place);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollOut()",300);
} else {
place++;
window.setTimeout("scrollIn()",50);
}
}
function scrollOut() {
window.status=Message.substring(place, Message.length);
if (place >= Message.length) {
place=1;
window.setTimeout("scrollIn()", 100);
} else {
place++;
window.setTimeout("scrollOut()", 50);
}
}
// End -->
</SCRIPT>

15〉闪烁的状态栏的字
<body onLoad="flash()">
<script language="">
<!--
var yourwords = "要的字";
var speed = 700;
var control = 1;
function flash()
{
if (control == 1)
{
window.status=yourwords;
control=0;
}
else
{
window.status="";
control=1;
}
setTimeout("flash()",speed);
}
// -->
</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 2009-01-03 17:45 健儿 阅读(89) 评论(0)  编辑  收藏 所属分类: 网摘┊新闻或网闻

只有注册用户登录后才能发表评论。
网站导航: