|
一、代码常识，新手必看
|
|
1、颜色代码： |
|
『8小时外』赚钱网（绿色）
<font color="#008000">『8小时外』赚钱网</font>
『8小时外』赚钱网（褐色）
<font color="#800000">『8小时外』赚钱网</font>
『8小时外』赚钱网（蓝色）
<font color="#000080">『8小时外』赚钱网</font>
『8小时外』赚钱网（紫色）
<font color="#800080">『8小时外』赚钱网</font>
『8小时外』赚钱网（红色）
<font color="#FF0000">『8小时外』赚钱网</font>
|
|
2、文字加粗，倾斜的代码
|
|
文字加粗的代码是:
<b>『8小时外』赚钱网</b>
文字倾斜的代码是: <i>『8小时外』赚钱网</i>
|
|
3、文字链接代码
|
|
如果您想点击某处文字会连接到另外一个网页的效果，这是超链接，代码是这样：
<a href=http://XXX.com/?id=admin;>『8小时外』赚钱网</a>
如果要点了这个文字以后重新打开一个窗口的话，代码是：
<a href=http://XXX.com/?id=admin;;
target="_blank">『8小时外』赚钱网</a>
|
|
4、在网站上放图片的代码
|
|
如果你看到一个好看的图片想放到网站上，代码是这样的：
<img src="你想链接的图片地址";
width="150" height="100">
后面的数字调节图片的尺寸大小。
|
|
5、图片链接网站代码
|
|
如果要点一下图片就能打开一个网站的链接代码是这样的：
<a href="你想链接的网址";><img
src="你所链接的图片"; width="150"
height="100"></a>
如果要点一下图片就能打开一个网站的链接，并且重新打开一个窗口。代码是这样的：
<a href="你想链接的网址";;
target="_blank"><img src="你想链接的图片";
width="150" height="100"></a>
点一下图片打开一个网站的链接，重新打开窗口并图片周边没有黑边。代码是这样的：
<A href="你想链接的网址 height=48
src="你想链接的图片" width=40
border=0></A>
上面的数字都能调节图片尺寸大小。
|
|
6、换行代码
|
|
如果你想换行，直接用Enter键是不行的，需要在您想换行的位置输入<br>
这样就会分成两行显示
，整个网站看起来也不会是一大片了，而是段落分明。
如果输入一个<br>，那就是另起一行，如果连续输入两个，即<br><br>，那就会空一行 .
|
|
7、文字移动的代码
|
|
<marquee>这里写文字</marquee>
|
|
8、移动图片的代码
|
|
<marquee><img
src="http://XXX.com/XXX.jpg"><marquee>
把里面的图片地址换成你的就行
想多放一个图片就按照格式在中间插入：
<img src="http://www.XXX.COM/XXX.jpg";>
里面的图片地址自己定。
|
|
9、背景音乐的代码
|
|
如果想在你的网站上放上一段好听的背景音乐，代码是：
<bgsound
src="http://xxxxx.com/xxx.mid";loop=10>
里面的背景音乐地址你能自己替换。
前面的是音乐地址，一般都以mid或者mp3的形式结尾
后面的数字是播放次数。
http://www.midifan.com/midi/
这个网站都有好的背景音乐
|
|
10、在网站中插入一个Flash动画的代码
|
|
<embed
width=200 height=200
src="http://XXX.COM/XXX.swf";>
里面的动画地址换成你的.动画地址都要以swf的形式结尾。这点需要注意。
|
|
10、打开网站时出现欢迎词的代码
|
|
<body
onLoad= alert("你好，欢迎访问本网站！")>
|
|
一、特效代码，个性十足
|
|
1、变色文字链接（无须修改直接复制到主页的html的<body></body>之间）
|
|
<script
language="JavaScript">
<!-- Begin
function initArray() {
for (var i = 0; i < initArray.arguments.length; i++) {
this[i] = initArray.arguments[i];
}
this.length = initArray.arguments.length;
}
var colors = new initArray(
"#000000","#0000FF","#80FFFF","#80FF80","#FFFF00","#FF8000","#FF00FF","#FF0000"
);
delay = 100
link = 0;
vlink = 0;
function linkDance() {
link = (link+1)%colors.length;
vlink = (vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance()",delay);
}
linkDance();
// End -->
</script>
|
|
2、打字效果的文字（修改显示的文字后直接复制到主页的htmol<body></body>之间）
|
|
<script
language=javascript>
var layers = document.layers, style = document.all, both =
layers || style, idme=908601;
if (layers) { layerRef = 'document.layers'; styleRef = ''; }
if (style) { layerRef = 'document.all'; styleRef = '.style'; }
function writeOnText(obj, str) {
if (layers) with (document[obj]) { document.open();
document.write(str); document.close(); }
if (style) eval(obj+'.innerHTML= str'); }
var dispStr = new Array(
"朋友欢迎光临心中的白桦林，祝你快乐、幸福、安康！"
);
var overMe=0;
function txtTyper(str, idx, idObj, spObj, clr1, clr2, delay,
plysnd) {
var tmp0 = tmp1 = '', skip =100;
if (both && idx <= str.length) {
if (str.charAt(idx) == '<') { while (str.charAt(idx) !=
'>') idx++; idx++; }
if (str.charAt(idx) == '&' && str.charAt(idx+1) !=
' ') { while (str.charAt(idx) != ';') idx++; idx++; }
tmp0 = str.slice(0,idx);
tmp1 = str.charAt(idx++);
if (overMe==0 && plysnd==1) {
if (navigator.plugins[0]) {
if(navigator.plugins["LiveAudio"][0].type=="audio/basic"
&& navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100); }
} else if (document.all) {
ding.Stop();
setTimeout("ding.Run()",100); }
overMe=1;
} else overMe=0;
writeOnText(idObj, "<span
class="+spObj+"><font
color='"+clr1+"'>"+tmp0+"</font><font
color='"+clr2+"'>"+tmp1+"</font></span>");
setTimeout("txtTyper('"+str+"',
"+idx+", '"+idObj+"',
'"+spObj+"', '"+clr1+"',
'"+clr2+"', "+delay+"
,"+plysnd+")",delay);}}
function init() {
txtTyper(dispStr[0], 0, 'ttl0', 'ttl1', '#339933', '#99FF33',
300, 0);
}
</script>
<BODY onload=init() >
<DIV class=ttl1 id=ttl0></DIV>
</BODY>
|
|
3、分时问候（修改显示的文字后直接复制到主页的htmol<body></body>之间）
|
|
<script
language="javaScript">
<!--
now = new Date(),hour = now.getHours()
if(hour < 6){document.write("凌晨好!")}
else if (hour < 9){document.write("早上好!")}
else if (hour < 12){document.write("上午好!")}
else if (hour < 14){document.write("中午好!")}
else if (hour < 17){document.write("下午好!")}
else if (hour < 19){document.write("傍晚好!")}
else if (hour < 22){document.write("晚上好!")}
else {document.write("夜里好!")}
// -->
</script>
|
|
4、页面转换特效（由上到下的刷新效果）（可将Transition=5中的数字自己调换一下看看，将会有别
的效果）复制到html的<head></head>之间
|
<head>
<meta http-equiv="Page-Enter"
content="revealTrans(Duration=5.0,Transition=5)">
</head> |
|
5、将LOGO图片固定在页面左上角<根据说明修改即可!复制到html文件的<body>和</body>之间>
|
|
<SCRIPT
language=JavaScript>
<!-- Hide the script from old browsers --
// 1) 做一个88*31的LOGO。
if (document.images)
var staticlogo=new Image(88,31)
// 2) 设置LOGO的路径。
staticlogo.src="image1.gif"
// 3) 以下是LOGO代表的连接。
var logolink="http://qdjacky.126.com"
// 4) 设置ALT属性。
var alttext="梦想工作室"
// 5) 设置下列属性为 1或者0(1是IE特有的，使LOGO隐现）
var fadeintoview=1
/* 6) 最后设置LOGO显示的时间，例如12
秒，数值为0表示一直显示。
*/
var visibleduration=12
/////////////////////////以下不要改变/////////////////////////
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",400)
}
var fadeset=''
if (fadeintoview)
fadeset="filter:alpha(opacity=0)"
if (document.all)
document.write('<span id="logo""
style="'+fadeset+';position:absolute;top:100;width:'+staticlogo.width+';height:'+staticlogo.height+'"></span>')
function bringintoview(){
if (logo.filters.alpha.opacity<=95)
logo.filters.alpha.opacity+=5
else{
clearInterval(viewit)
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}
function createlogo(){
staticimage=new Layer(100)
staticimage.left=-300
staticimage.top=120
staticimage.document.write('<a
href="'+logolink+'"><img
src="'+staticlogo.src+'" border=0
alt="'+alttext+'"></a>')
staticimage.document.close()
staticimage.visibility="show"
regenerate2()
staticitns()
}
if (document.layers)
window.onload=createlogo;
if (document.all){
w=2
h=2
logo.style.left=w
logo.style.top=h
}
function logoit(){
var w2=document.body.scrollLeft+w
var h2=document.body.scrollTop+h
logo.style.left=w2
logo.style.top=h2
}
function logoit2(){
staticimage.left=pageXOffset+2
staticimage.top=pageYOffset+2
}
function insertimage(){
logo.innerHTML='<a href="'+logolink+'"><img
src="'+staticlogo.src+'" border=0
alt="'+alttext+'"></a>'
if (fadeintoview)
viewit=setInterval("bringintoview()",100)
else{
if (visibleduration!=0)
setTimeout("logo.style.visibility='hidden'",visibleduration*1000)
}
}
if (document.all){
window.onscroll=logoit
window.onresize=new
Function("window.location.reload()")
window.onload=insertimage
}
function staticitns(){
setInterval("logoit2()",90)
if (visibleduration!=0)
setTimeout("staticimage.visibility='hide'",visibleduration*1000)
}
//-->
</SCRIPT>
|
|
6、挑战微软动态菜单效果！共2步修改以下超链接部分改为你自己的就可以使用了。本按钮突起效果
只在IE5.0版本下面有效，但可以在低版本和NC正常显示本菜单的效果在微软网站的windows产品站可
以看到。
|
|
第一步：将下面的CSS定义样式单加入<head></head>之间：
<STYLE>A:link {
TEXT-DECORATION: none
}
A:hover {
COLOR: red
}
A.bb {
TEXT-DECORATION: underline
}
A.cc {
COLOR: black
}
A.cc:hover {
COLOR: white
}
.LeftNavOff {
BACKGROUND-COLOR: white; BORDER-BOTTOM: white 2px solid;
BORDER-LEFT: white 2px solid; BORDER-RIGHT: white 2px solid;
BORDER-TOP: white 2px solid; COLOR: black; CURSOR: hand;
FONT-SIZE: 14px;FONT-FAMILY: 宋体; LETTER-SPACING: -0.5pt;
LINE-HEIGHT: 14pt; MARGIN: 2px 0px; PADDING-BOTTOM: 0px;
PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 0px;
TEXT-DECORATION: none
}
.LeftNavUp {
BACKGROUND-COLOR: #0099ff; BORDER-BOTTOM: #003399 2px solid;
BORDER-LEFT: #99ccff 2px solid; BORDER-RIGHT: #003399 2px
solid; BORDER-TOP: #99ccff 2px solid; COLOR: white; CURSOR:
hand; FONT-SIZE: 14px;FONT-FAMILY: 宋体; FONT-WEIGHT: bold;
HEIGHT: 0pt; LETTER-SPACING: -0.5pt; LINE-HEIGHT: 14pt;
MARGIN: 2px 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 3px;
PADDING-RIGHT: 3px; PADDING-TOP: 0px; TEXT-DECORATION: none;
}
</STYLE>
第二步：将下面的代码加入<body></body>之间：
<table border="0" width="33%"
cellspacing="0" cellpadding="0">
<tr>
<td width="100%"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item1
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="../tip/index.htm">心得技巧文集</a></td>
</tr>
<tr>
<td width="100%" height="14"><img
border="0" src="1pbw.gif"
width="185" height="1"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item2
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="../library/index.htm">制作素材精品</a></td>
</tr>
<tr>
<td width="100%" height="14"><img
border="0" src="1pbw.gif"
width="185" height="1"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item3
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="../download/index.htm">本站资料下载lt;/a></td>
</tr>
<tr>
<td width="100%" height="14"><img
border="0" src="1pbw.gif"
width="185" height="1"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item4
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="http://www.。。。.net/cgi-bin/ubb/Ultimate.cgi">网页制作论坛</a></td>
</tr>
<tr>
<td width="100%" height="14"><img
border="0" src="1pbw.gif"
width="185" height="1"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item5
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="index.htm">Dhtml技术栏目</a></td>
</tr>
<tr>
<td width="100%" height="14"><img
border="0" src="1pbw.gif"
width="185" height="1"></td>
</tr>
<tr>
<td width="100%" class=LeftNavOff id=item6
language=JScript
onmouseout="this.className='LeftNavOff'"
onmouseover="this.className='LeftNavUp'"><a
class=cc href="http://。。。.net">心中的“8小时外”</a></td>
</tr>
<tr>
<td width="100%"></td>
</tr>
</table>
|
|
7、颜色代码表(对做教学类站点应该有帮助<body>之间)
|
|
<script
LANGUAGE="JavaScript">
clr=new Array('00','20','40','60','80','a0','c0','ff');
for (i=0;i<8;i++) {
document.write("<table border=1
cellpadding=8>");
for (j=0;j<8;j++) {
document.write("<tr>");
for (k=0;k<8;k++) {
document.write('<td
bgcolor="#'+clr[i]+clr[j]+clr[k]+'">');
document.write('<tt><font
color="#'+clr[7-i]+clr[7-j]+clr[7-k]+'"> ');
document.write(clr[i]+clr[j]+clr[k]+'
</font></tt></td>'); }
document.write("</tr>"); }
document.write("</table><br>"); }
// end -->
</script>
|
|
8、自动弹出式窗口(调用一个窗体时自动弹出一个新的窗体)
|
1、调整窗口大小：通过width=200,height=170控制。还可以控制是否有滚动栏等。
2、popup.location.href = '用于说明窗口内容.htm'；这一行在做什么：就是设置窗口中出现的内容的文件名
将如下代码加入HTML的<HEAD>区：
<script language="JavaScript">
<!--
var gt = unescape('%3e');
var popup = null;
var over = "Launch Pop-up Navigator";
popup = window.open('', 'popupnav',
'width=200,height=170,resizable=1,scrollbars=auto');
if (popup != null) {
if (popup.opener == null) {
popup.opener = self;
}
popup.location.href = '说明窗口内容文件.htm';
}
// -->
</script>
|
|
9、普通下拉式菜单（菜单中的内容多少不限，照格式写。连接URL使用绝对URL（http://）和相对路
径都可以）
|
|
以下代码加入HTML的<BODY>区即可：
<FORM name="guideform">
<SELECT name="guidelinks">
<OPTION SELECTED
value="http://place.com/page1.htm">Page 1
<OPTION
value="http://place.com/page2.htm">Page2
<OPTION
value="http://place.com/page3.htm">Page3
<OPTION
value="http://place.com/page4.htm">Page4
</SELECT>
<INPUT type="button" name="go"
value="Go!"
onClick="window.location=document.guideform.guidelinks.options[document.guideform.guidelinks.selectedIndex].value">
</FORM>
|
|
10、中文日期（不需要修改,直接复制到html的<body></body>之间）
|
<script
LANGUAGE="JavaScript">
function number(index1){
var numberstring="一二三四五六七八九十";
if(index1 ==0) {document.write("十")}
if(index1 < 10){
document.write(numberstring.substring(0+(index1-1),index1))}
else if(index1 < 20 ){
document.write("十"+numberstring.substring(0+(index1-11),(index1-10)))}
else if(index1 < 30 ){
document.write("二十"+numberstring.substring(0+(index1-21),(index1-20)))}
else{
document.write("三十"+numberstring.substring(0+(index1-31),(index1-30)))}
}
var today1 = new Date()
var month = today1.getMonth()+1
var date = today1.getDate()
var day = today1.getDay()
document.write("<br><strong><small><center>")
document.write("公元二零零零年")
number(month)
document.write("月")
number(date)
document.write("日</small><center>")
</script>
|
|
11、带开关功能的时钟（不需要修改，直接复制到html的<body></body>之间）
|
<script
language="JavaScript">var enabled = 0;
function TOfunc() {
TO = window.setTimeout( "TOfunc()", 1000 );
var today = new Date();
document.clock.disp.value = today.toLocaleString();}
</script>
<form name="clock">
<input type="text" name="disp"
value="" size=20 onFocus="this.blur()"
>
<br><input type="radio"
name="rad" value="OFF" checked
onClick="
if( enabled==1 )
{document.clock.disp.value='';clearTimeout( TO );enabled =
0;}"> 关
<input type="radio" name="rad"
value="on"onClick="if( enabled == 0 ) {var TO =
setTimeout( 'TOfunc()', 1000 );enabled = 1;}"> 开
</form> |
|
12、关闭窗体（不需要修改，直接复制到html的<body></body>之间）
|
|
<script
language="JavaScript">
function shutwin(){
window.close();
return;}
</script>
<a href="javascript:shutwin();">关闭本窗口</a>
|
|
13、跟随鼠标的文字（修改跟随鼠标的文字及颜色的代码即可复制到<body></body>之间）
|
|
<style
type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #000000;
font-weight:bold;
}</style>
<script>
var x,y
var step=20
var flag=0
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]=-50}
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>
<body onLoad="makesnake()" >
<script>
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;
</script>
|
|
14、升降特效的文字（修改显示的文字后直接复制到主页的html的<body></body>之间）
|
|
<script
language="JavaScript">
<!--
done = 0;
step = 4
function anim(yp,yk)
{
if(document.layers) document.layers["napis"].top=yp;
else document.all["napis"].style.top=yp;
if(yp>yk) step = -4
if(yp<60) step = 4
setTimeout('anim('+(yp+step)+','+yk+')', 35);
}
function start()
{
if(done) return
done = 1;
if(navigator.appName=="Netscape") {
document.napis.left=innerWidth/2 - 145;
anim(60,innerHeight - 60)
}
else {
napis.style.left=11;
anim(60,document.body.offsetHeight - 60)
}
}
//-->
</script>
<div id="napis" style="position:
absolute;top: -50;
color: #000000;font-family:宋体;font-size:9pt;"><p>
欢迎光临心中的白桦林！
</p></div>
<script language="JavaScript">
<!--
setTimeout('start()',10);
//-->
</script>
|
|
15、状态栏中的文字（修改显示的文字后直接复制到主页的htmol<body></body>之间）
|
|
<script
language=JavaScript>
var MESSAGE = "欢迎光临梦想工作室"
var POSITION = 100
var DELAY = 5
var scroll = new statusMessageObject()
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}
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>
|
|
16、现在的日期及星期（无须修改直接复制到主页的html的<body></body>之间）
|
|
<script
language=JavaScript>
today=new Date();
function initArray(){
this.length=initArray.arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray.arguments[i] }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=##000000
style='font-size:9pt;font-family: 宋体'> ",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getDate(),"日",
d[today.getDay()+1],
"</font>" );
</script>
|
|
17、图片的渐显播放(根据下面的说明进行共3步，图片的路径名称可以自己定义和修改
。第三步的
“top:120px;left:240px”可以设定显示的位置。)
|
|
第一步：将下面的代码加入<head></head>之间：
<script language=javaScript>
<!--//
sandra0 = new Image();
sandra0.src = "image1.gif";
sandra1 = new Image();
sandra1.src = "image2.gif";
sandra2 = new Image();
sandra2.src = "image3.gif";
var i_strngth=1
var i_image=0
var imageurl = new Array()
imageurl[0] ="image1.gif"
imageurl[1] ="image2.gif"
imageurl[2] ="image3.gif"
function showimage() {
if(document.all) {
if (i_strngth <=110) {
testimage.innerHTML="<img
style='filter:alpha(opacity="+i_strngth+")'
src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth+10
var timer=setTimeout("showimage()",100)
}
else {
clearTimeout(timer)
var timer=setTimeout("hideimage()",1000)
}
}
if(document.layers) {
clearTimeout(timer)
document.testimage.document.write("<img
src="+imageurl[i_image]+" border=0>")
document.close()
i_image++
if (i_image >= imageurl.length) {i_image=0}
var timer=setTimeout("showimage()",2000)
}
}
function hideimage() {
if (i_strngth >=-10) {
testimage.innerHTML="<img
style='filter:alpha(opacity="+i_strngth+")'
src="+imageurl[i_image]+" border=0>";
i_strngth=i_strngth-10
var timer=setTimeout("hideimage()",100)
}
else {
clearTimeout(timer)
i_image++
if (i_image >= imageurl.length) {i_image=0}
i_strngth=1
var timer=setTimeout("showimage()",500)
}
}
//-->
</script>
第二步，修改<body>语句为<body
onLoad="showimage()">
第三步：将下面的代码加入<body></body>之间：
<div
id="testimage"
style="position:absolute;visibility:visible;top:120px;left:240px"></div>
|
|
18、带链接的滚动字幕(修改名称及链接后复制到html的<body></body>之间)
|
|
<script
language="JavaScript1.2">
//设置marquee的宽度 (in pixels)
var marqueewidth=400
//设置marquee的高度 (in pixels, 该参数只适用于NS)
var marqueeheight=20
//设置marquee滚动的速度(数值大速度快)
var speed=4
//设置marquee显示内容，使用标准的HTML语法。
var marqueecontents='<strong><big>欢迎访问
<a href="http://lig555.51.com">心中的白桦林</a>
带你进入网络的世界 <a
href="mailto:lig555@163.net">给我来封信！</a></big></strong></font>'
if (document.all)
document.write('<marquee scrollAmount='+speed+'
style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
setTimeout("window.onresize=regenerate",450)
intializemarquee()
}
}
function intializemarquee(){
document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')
document.cmarquee01.document.cmarquee02.document.close()
thelength=document.cmarquee01.document.cmarquee02.document.width
scrollit()
}
function scrollit(){
if
(document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){
document.cmarquee01.document.cmarquee02.left-=speed
setTimeout("scrollit()",100)
}
else{
document.cmarquee01.document.cmarquee02.left=marqueewidth
scrollit()
}
}
window.onload=regenerate2
</script>
<ilayer width=&{marqueewidth};
height=&{marqueeheight}; name="cmarquee01">
<layer name="cmarquee02"></layer>
</ilayer>
|
|
19、跟随鼠标的图片(修改图片名称slime.gif及路径后根据操作复制到相应位置共2步)
|
第一步：将下面的代码加入<head>和</head>之间：
<!-- 以下代码是设定smile的代码 -->
<script LANGUAGE="JavaScript">
var newtop=0
var newleft=0
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 -
width))
{
newleft=document.body.clientWidth + document.body.scrollLeft -
5 - width
}
else
{
newleft=document.body.scrollLeft + event.clientX
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft')
if (event.clientY > (document.body.clientHeight - 5 -
height))
{
newtop=document.body.clientHeight + document.body.scrollTop -
5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval('curElement'+styleSwitch+'.pixelTop=newtop')
}
document.onmousemove = doMouseMove;
</script>
第二步：将下面的代码加入<body>和</body>之间任意地方：
<!-- 以下代码是设定此页的鼠标样式代码
-->
<script language="javascript">
if (navigator.appName == "Netscape") {
}
else
{
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="smile.gif"
STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')
document.write('</div>')
}
</script>
|
|
20、垂直滚动公告板！修改所出现的文字后根据提示复制到相应的地方
|
第一步，请将下列原代码放入html文件的<head>和</head>之间
<script>
<!--
lstart=200
loop=true
speed=350
pr_step=5
function makeObj(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=(document.layers) ?
eval(nest+'document.'+obj):eval(obj+'.style')
this.scrollHeight=document.layers?this.css.document.height:eval(obj+'.offsetHeight')
this.up=goUp
this.obj = obj + "Object"
eval(this.obj + "=this")
return this
}
function goUp(speed){
if(parseInt(this.css.top)>-this.scrollHeight){
this.css.top=parseInt(this.css.top)-pr_step
setTimeout(this.obj+".up("+speed+")",speed)
}else if(loop) {
this.css.top=lstart
eval(this.obj+".up("+speed+")")
}
}
function slideInit(){
oSlide=makeObj('divNews','divCont')
oSlide.css.top=lstart
oSlide.up(speed)
}
onload=slideInit
//-->
</script>
其中lstart设置起始位置，loop设置是否循环，speed是滚动速度，pr_step设置间距。
第二步，请将下列代码放入html文件的任何地方，建议放在最后，就是</html>之后。
<div
id="divCont"
style="position:absolute; width:300; height:100; top:120;
left:280; clip:rect(0,250,150,0)"><div
id="divNews" style="position:absolute; top:0;
left:0">
<p>这是一个滚动看板<br>
但并不是大家经常看到的<br>
用<font face="Arial">java</font>实现的那种<br>
它采用<font
face="Arial">javacript</font>语言和<font
face="Arial">DHTML</font>的层<br>
所以你看到的原代码<br>
不需要固定在form框里或者表格里<br>
它是用的<font
face="Arial"><div></div></font><br>
你可以把这段代码放在<font
face="Arial">HTML<br>
</font>代码里的任何地方<br>
都不会影响它出现的位?lt;/p>
<p>这是一个用处很大的程序<br>
可以用在网页里作广告或则告示板<br>
赶快<font face="Arial">Copy</font>到你的主页里试试吧！</p></div></div>
|
|
21、从天而降的浏览器(效果是不是很惊人无需修改复制到html的<body></body>即可用自己体验一下
效果吧！)
|
|
<html>
<head>
<title>
Drop Browser Window
</title>
<script>
function drop(n) {
if(self.moveBy){
self.moveBy (0,-900);
for(i = n; i > 0; i--){
self.moveBy(0,3);
}
for(j = 8; j > 0; j--){
self.moveBy(0,j);
self.moveBy(j,0);
self.moveBy(0,-j);
self.moveBy(-j,0);
}
}
}
</script>
</head>
<body onLoad="drop(300)">
</body>
</html>
|
|
22、滚动的背景(见过吗?)一个VBScript脚本，背景是运动的。首先为页面设一个背景图，然后将这一段代码加入<body>区!IE专用！：
|
|
<script
language="VBScript">
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+1
Document.all(numgc).style.BackgroundPosition= "0 "
&c
id=SetTimeOut("SF",16,"VBScript")
end sub
SF
</script>
|
|
23、十分棒的MIDI播放器(可根据相应的项目修改)
|
| 1.以下代码放在HTML的<HEAD>区：
<Script
Language="JavaScript">
<!-- Hiding
song = new Array()
var x = 0
song[1] = "007主题曲之一"
song[2] = "007主题曲之二"
song[3] = "999朵玫瑰"
song[4] = "X-档案主题曲"
song[5] = "用心良苦"
song[6] = "泰坦尼克主题曲"
function prev(){
if (x>1)
{ x--
document.midi.typein.value=song [x]
}
}
function next(){
var max= song.length-1
if (x<max)
{ x++
document.midi.typein.value=song [x]
}
}
function go(){
if (x != 0){
location.href='song'+x+'.mid'
//以上指定播放的是当前路径的midi文件，文件名分别是song1.mid-song6.mid
//
}
}
function start(){
x=1
document.midi.typein.value=song [x]
}
function end(){
x=song.length-1
document.midi.typein.value=song [x]
}
function cls(){
document.midi.typein.value="选曲"
}
// Done Hiding -->
</Script>
2.以下代码放在HTML的<BODY>区：
<BODY
onload="cls()">
<FORM Name="midi">
<INPUT NAME="typein" TYPE="text"
SIZE="25" ALIGN=top><BR>
<font size=3>
<INPUT TYPE=Button Value="|<<" Align=left
onclick="start()">
<INPUT TYPE=Button Value="<<" Align=left
onclick="prev()">
<input type=Button value="PLAY" align=left
onClick="go()" name="Button">
<INPUT TYPE=Button Value=">>" Align=left
onclick="next()">
<INPUT TYPE=Button Value=">>|" Align=left
onclick="end()">
</font>
</FORM>
|
|
24加入收藏夹（修改显示的文字、链接、名称后复制到html的<body></body>之间）
|
|
<script
language="JavaScript">var enabled = 0;
function TOfunc() {
TO = window.setTimeout( "TOfunc()", 1000 );
var today = new Date();
document.clock.disp.value = today.toLocaleString();}
</script>
<form name="clock">
<input type="text" name="disp"
value="" size=20 onFocus="this.blur()"
>
<br><input type="radio"
name="rad" value="OFF" checked
onClick="
if( enabled==1 )
{document.clock.disp.value='';clearTimeout( TO );enabled =
0;}"> 关
<input type="radio" name="rad"
value="on"onClick="if( enabled == 0 ) {var TO =
setTimeout( 'TOfunc()', 1000 );enabled = 1;}"> 开
</form>
|
|
25、自动滚屏（不需要修改，直接复制到html的<body></body>之间）
|
|
<script
language="JavaScript">
var position = 0;
function scroller() {
if (position !=700 ) {
position++;
scroll(0,position);
clearTimeout(timer);
var timer = setTimeout("scroller()",50);
timer;}}
scroller() ;
</script>
|
|
26、跟随鼠标的萤火虫（无须修改直接复制到主页的html的<body></body>之间）
|
|
<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>
<script language="JavaScript">
function
YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep)
{ //v1.2
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) {
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>
<body>
<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>
</body>
|
|