2022年做网页的一些技巧源码精华教程.docx
2022年做网页的一些技巧源码精华教程Q: 实现双击自动滚屏.A: 将以下代码添加到须要自动滚屏的页面上<s cript Language=Javas cript>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='> target=_blank onMouseOver=helpor_net_show(this,event,' 这里是小郭的个人主页 ') onMouseOut=helpor_net_hide()> 把鼠标放上来试试<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=testfunction helpor_net_show(current,e,text){if (document.alldocument.readyState=complete){document.all.tooltip2.innerHTML='<marquee style=border:1px solid #3399ff>'+text+'</marquee>'document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10document.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=0currentscroll=setInterval(scrolltip(),100)document.tooltip2.left=e.pageX+10document.tooltip2.top=e.pageY+10document.tooltip2.visibility=show}}function helpor_net_hide(){if (document.all)document.all.tooltip2.style.visibility=hiddenelse 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-=5elsedocument.tooltip2.document.nstip.left=150}/-></SCRIPT>Q: 文本随机输出,可以用来作公告栏 。A: 脚本说明 :第一步 : 把如下代码加入 <head> 区域中<SCRIPT LANGUAGE=JavaScript><!- Original: Tarjei Davidsen (the) -><!- This script and many more are available free online at -><!- The JavaScript Source! http:/javas'>http:/javas -><!- Beginvar max=0;function textlist() { i+:textlist.argumentsi; max }tl = new textlist( 随着 INTERNET 时代的逐步到来 , 人们对网络的相识与感知越来越深刻 , 上网主要是进行 web 页面阅读,所以 web 页面的精彩程度对一个网站的生 , 人通过制作个人主页呈现自己的才华,而且,由于出现了多种制作网页的软件 , 但是,光用软件就成制作出你想要的各种页面效果吗?答案确定是否定的但是,光用软件就成制作出你想要的各种页面效果吗?答案确定是否定的 , JavaScript 是 Netscape( 网景 ) 公司首先推出的一种针对 WEB 页面的说明型语);var x = 0; pos = 0;var l = tl0.length;function textticker() {document.tickform.tickfield.value = tlx.substring(0, pos) + _;if(pos+ = l) {pos = 0;setTimeout(textticker(), 2000);if(+x = max) x = 0;l = tlx.length;} elsesetTimeout(textticker(), 50);}/ End -></script></HEAD>其次步 : 把如下代码加入 <body> 区域中<form name=tickform><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> 改为<body bgcolor=#fef4d9 OnLoad=textticker()>Q: 进入页面自动弹出的欢迎致词,个人网站可加.A: 今日在公司网站上抓的,进入页面自动弹出的欢迎致词,个人网站可加上不免没有加好呀。加的位置应当可以看懂吧。<html><head></head><body></body><script language=vbscript><!-MsgBox欢迎光临我的网站!-></script></html>Q: 页面自动刷新说明 。A: 当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果特别地简洁,而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv=refresh content=20>,其中20指每隔20秒刷新一次页面.2,页面自动跳转:把如下代码加入<head>区域中<meta http-equiv=refresh content=20;url=>,其中20指隔20秒后跳转到页面。'>页面。Q: 鼠标箭头变十字架代码(对一些特别的网页有用) .A: 你们自己试试效果就知道了.<script language=JavaScript1.2><!-if (document.all!window.print){leftright.style.width=document.body.clientWidth-2topdown.style.height=document.body.clientHeight-2}else if (document.layers){document.leftright.clip.width=window.innerWidthdocument.leftright.clip.height=1document.topdown.clip.width=1document.topdown.clip.height=window.innerHeight}function followmouse1(){/move cross engine for IE 4+leftright.style.pixelTop=document.body.scrollTop+event.clientY+1topdown.style.pixelTop=document.body.scrollTopif (event.clientX<document.body.clientWidth-2)topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1elsetopdown.style.pixelLeft=document.body.clientWidth-2}function followmouse2(e){/move cross engine for NS 4+document.leftright.top=e.y+1document.topdown.top=pageYOffsetdocument.topdown.left=e.x+1}if (document.all)document.onmousemove=followmouse1else 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 id=leftright style=width:expression(document.body.clientWidth-2)></div><div id=topdown style=height:expression(document.body.clientHeight-2)></div>然後切換到您的網頁,按Ctrl+V將剛剛複製的程式碼貼在<body>