咳,在此呢,我又要说一下废话了,其实在很早之前,就有收集博客代码的习惯,逐渐就积累了很多博客的装扮技巧,很多时候别人进来我这里做客时,会问这样那样的关于博客代码的问题,有时候,太多人问了,我觉得挨个回答有点麻烦,还不如写个东西出来供大家自行学习更好。不过一直都没有这个恒心去做,于是,就懒了下来:(
现在作为博客生活这个大家庭中的管理员,我就该以身作则,为大家服务。早前也有个博客用户提醒了我,让我收集一下经常会碰到的关于博客代码的问题,做个索引,好让大家自行查阅,也免去了私下留言,邮件往返的麻烦。因此,就成就了我这篇问题集的出现,呵呵。
我只能把我知道的放这里,如果有其他特殊的问题,欢迎大家给我的邮箱留言: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