做网页的一些技巧（续）

　　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>改为

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=348254

教程首页更多教程