做网页的一些技巧（续）

王朝asp·作者佚名 2006-01-09

宽屏版字体: 小|中|大|超大

Q: 实现双击自动滚屏.

A: 将以下代码添加到需要自动滚屏的页面上

var currentpos, timer;

function initialize(){

timer = setInterval("scrollwindow()", 1);

}

function sc(){

clearInterval(timer);

}

function scrollwindow(){

currentpos = document.body.scrollTop;

window.scroll(0, ++currentpos);

if(currentpos != document.body.scrollTop){

sc();

}

document.onmousedown = sc;

document.ondblclick = initialize;

</s cript>

Q: 鼠标特效。

A: 鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明

<a href="http://xiaoguo001.nease.net" target="_blank" onMouseOver="helpor_net_show(this,event,' 这里是小郭的个人主页 ')" onMouseOut="helpor_net_hide()"> 把鼠标放上来试试

</div>

<!--

if (!document.layers&&!document.all)

event="test"

function helpor_net_show(current,e,text){

if (document.all&&document.readyState=="complete"){

document.all.tooltip2.innerHTML='<marquee style="border:1px solid #3399ff">'+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(' '+text+' ')

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

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>

Q: 文本随机输出，可以用来作公告栏。

A: 脚本说明 :

第一步 : 把如下代码加入 <head> 区域中

<!-- Begin

var max=0;

function textlist() { i++:textlist.arguments[i]; max }

tl = new textlist(

" 随着 INTERNET 时代的逐步到来 , 人们对网络的认识与感知越来越深刻 ",

" 上网主要是进行 web 页面浏览，所以 web 页面的精彩程度对一个网站的生 ",

" 人通过制作个人主页展现自己的才华，而且，由于出现了多种制作网页的软件 ",

" 但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的 ",

"JavaScript 是 Netscape( 网景 ) 公司首先推出的一种针对 WEB 页面的解释型语 "

);

var x = 0; pos = 0;

var l = tl[0].length;

function textticker() {

document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";

if(pos++ == l) {

pos = 0;

setTimeout("textticker()", 2000);

if(++x == max) x = 0;

l = tl[x].length;

} else

setTimeout("textticker()", 50);

}

// End -->

</script>

</HEAD>

第二步 : 把如下代码加入 <body> 区域中

<textarea name=tickfield rows=3 cols=38 style="background-color: rgb(0,0,0); color: rgb(255,255,255); cursor: default; font-family: Arial; font-size: 12px" wrap=virtual>The news will appear here when the page has finished loading.

</textarea>

</form>

第三步 : 把 <body> 改为

Q: 进入页面自动弹出的欢迎致词，个人网站可加......

A: 今天在公司网站上抓的，进入页面自动弹出的欢迎致词，个人网站可加上不免没有加好呀。加的位置应该可以看懂吧。

<html>

<head>

</head>

<body>

</body>

<!--

MsgBox"欢迎光临我的网站！"

-->

</script>

</html>

Q: 页面自动刷新说明。

A: 当你做网页时，是不是有的时候想让你的网页自动不停刷新，或者过一段时间自动跳转到另外一个你自己设定的页面？其实实现这个效果非常地简单，而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

1，页面自动刷新：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

2，页面自动跳转：把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.163.com">,其中20指隔20秒后跳转到http://www.163.com页面。

Q: 鼠标箭头变十字架代码(对一些特殊的网页有用) .

A: 你们自己试试效果就知道了.

<!--

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>

<style>

<!--

#leftright, #topdown{

position:absolute;

left:0;

top:0;

width:1px;

height:1px;

layer-background-color:#B0D0F8;

background-color:#00eeff;

z-index:100;

font-size:1px;

}

-->

</style>

【貼上】然後切換到您的網頁，按『Ctrl+V』將剛剛複製的程式碼貼在</head>之前。

</div>

</div>

【貼上】然後切換到您的網頁，按『Ctrl+V』將剛剛複製的程式碼貼在<body>之後任何位置。

【修改程式碼】

若想改改線的顏色，那就改background-color:#00eeff;這部份，後面的顏色碼就行了。

Q: 网站鼠标点击有烟花效果的代码 .

A: <SCRIPT LANGUAGE="JavaScript1.2">

<!-- Begin

var ver = navigator.appVersion;

var dom = document.getElementById ? 1 : 0;

var ie5 = (ver.indexOf("MSIE 5") > -1 && dom) ? 1 : 0;

var n = (document.layers);

var ie = (document.all);

var sparksAflyin = 0;

var totalSparks = 0;

var sparksOn = 1;

function initMouseEvents() {

if (n) document.captureevents(event.mousedown | event.mousemove) }

function mouseDown(e) { i++):eval('anim_'+i+'_x[j]+mousex'); document.body.offsetheight+document.body.scrolltop:document.body.offsetHeight

+document.body.scrollTop-30; document.body.offsetwidth+document.body.scrollleft:document.body.offsetWidth

+document.body.scrollLeft-30; document.all.sdiv'+i+'.style.top:tempy; document.layers.sdiv'+i+'.left:tempx; document.layers.sdiv'+i+'.top:tempy;

totalsparks++= = ( }

if (totalSparks == 10) {

sparksAflyin = 0;

totalSparks = 0;

}

function SHOW(divName){

if (document.all)

eval('document.all.'+divName+'.style.visibility = "visible";');

else if (document.layers)

eval('document.layers["'+divName+'"].visibility = "visible";');

}

function HIDE(divName){

if (document.all)

eval('document.all.'+divName+'.style.visibility = "hidden";');

else if (document.layers)

eval('document.layers["'+divName+'"].visibility = "hide";');

}

anim_0_x=new Array(20,20,10,0,0,0,0,0,0,0,0,0);

anim_0_y=new Array(-20,-40,-60,-80,-60,-40,-20,0,20,40,60,80);

anim_1_x=new Array(20,20,17,36,60,78,90,92,93,98,108,120,133,152,181);

anim_1_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);

anim_2_x=new Array(20,20,2,3,4,5,6,7,8,9,10,12,13,15,18);

anim_2_y=new Array(-20,-20,-33,-38,-38,-27,-2,25,51,84,113,141,162,212,253);

anim_3_x=new Array(-20,-20,-2,-1,7,10,18,35,60,102,94,94,93,97,108,111,117,127);

anim_3_y=new Array(-20,-25,-64,-89,-104,-150,-173,-197,-213,-199,-151,-101,-66,-17,27,87,140,189);

anim_4_x=new Array(-20,-20,-10,-39,-30,-69,-64,-138,-154,-200,-181,-209,-191,-207,-203,-213,-202,-221,-211);

anim_4_y=new Array(-20,-20,-28,-51,-79,-100,-135,-154,-193,-183,-149,-134,-89,-60,8,51,107,157,201);

anim_5_x=new Array(-20,-29,-51,-72,-105,-133,-164,-189,-209,-229,-247,-270,-279,-282,-283,-283,-285,-286,-288);

anim_5_y=new Array(-20,-55,-86,-116,-154,-183,-205,-217,-217,-198,-169,-120,-44,-8,40,87,144,190,248);

anim_6_x=new Array(-20,-20,-7,14,44,79,143,186,217,226,234,244,250,259,265,274);

anim_6_y=new Array(-20,-21,-72,-113,-139,-166,-188,-181,-126,-68,-3,54,134,187,215,257);

anim_7_x=new Array(20,20,-3,-9,-13,-27,-33,-44,-54,-66,-77,-95,-107,-136,-150,-160,-164,-168,-171,-172,-172,-176,-175);

anim_7_y=new Array(-20,-26,-43,-63,-89,-116,-145,-169,-201,-222,-240,-253,-254,-245,-220,-195,-160,-124,-81,-53,-26,19,68);

anim_8_x=new Array(-20,20,-35,39,0,45,-1,24,-15,14,-20,35,-18,38,-11,16,49,64,81,93,100,103,109);

anim_8_y=new Array(-20,-20,-32,-42,-62,-76,-89,-107,-132,-147,-173,-180,-192,-209,-236,-193,-119,-73,-24,51,95,130,188);

anim_9_x=new Array(-20,-51,-89,-110,-165,-191,-228,-240,-259,-271,-277,-281,-287);

anim_9_y=new Array(-20,-20,-35,-37,-34,-16,10,47,105,150,189,227,273);

// End -->

</script>

</div>

Q: 文本随机输出，可以用来作公告栏，一个字一个字的输出，不错。。。

A: 脚本说明:

第一步:把如下代码加入<head>区域中

<!-- Begin

var max=0;

function textlist() {

max=textlist.arguments.length;

for (i=0; i<max; i++)

this[i]=textlist.arguments[i];

}

tl = new textlist(

" 随着INTERNET时代的逐步到来,人们对网络的认识与感知越来越深刻",

"上网主要是进行web页面浏览，所以web页面的精彩程度对一个网站的生",

"人通过制作个人主页展现自己的才华，而且，由于出现了多种制作网页的软件",

"但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的但是，光用软件就成制作出你想要的各种页面效果吗？答案肯定是否定的",

"JavaScript是Netscape(网景)公司首先推出的一种针对WEB页面的解释型语"

);

var x = 0; pos = 0;

var l = tl[0].length;

function textticker() {

document.tickform.tickfield.value = tl[x].substring(0, pos) + "_";

if(pos++ == l) {

pos = 0;

setTimeout("textticker()", 2000);

if(++x == max) x = 0;

l = tl[x].length;

} else

setTimeout("textticker()", 50);

}

// End -->

</script>

</HEAD>

第二步:把如下代码加入<body>区域中

</form>

第三步:把<body>改为