做網(wǎng)頁的一些技巧（續(xù)）
Q: 實(shí)現(xiàn)雙擊自動滾屏.
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: 鼠標(biāo)特效 。
A: 鼠標(biāo)放到鏈接上就會出現(xiàn)一個(gè)說明框，里面有滾動的文字說明
<a target="_blank" onMouseOver="helpor_net_show(this,event,' 這里是小郭的個(gè)人主頁 ')" onMouseOut="helpor_net_hide()"> 把鼠標(biāo)放上來試試
<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 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: 文本隨機(jī)輸出，可以用來作公告欄 。
A: 腳本說明 :
第一步 : 把如下代碼加入 <head> 區(qū)域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Tarjei Davidsen (the@rescueteam.com) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var max=0;
function textlist() { i++:textlist.arguments[i]; max }
tl = new textlist(
" 隨著 INTERNET 時(shí)代的逐步到來 , 人們對網(wǎng)絡(luò)的認(rèn)識與感知越來越深刻 ",
" 上網(wǎng)主要是進(jìn)行 web 頁面瀏覽，所以 web 頁面的精彩程度對一個(gè)網(wǎng)站的生 ",
" 人通過制作個(gè)人主頁展現(xiàn)自己的才華，而且，由于出現(xiàn)了多種制作網(wǎng)頁的軟件 ",
" 但是，光用軟件就成制作出你想要的各種頁面效果嗎？答案肯定是否定的但是，光用軟件就成制作出你想要的各種頁面效果嗎？答案肯定是否定的 ",
"JavaScript 是 Netscape( 網(wǎng)景 ) 公司首先推出的一種針對 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> 區(qū)域中
<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: 進(jìn)入頁面自動彈出的歡迎致詞，個(gè)人網(wǎng)站可加......
A: 今天在公司網(wǎng)站上抓的，進(jìn)入頁面自動彈出的歡迎致詞，個(gè)人網(wǎng)站可加上不免沒有加好呀。加的位置應(yīng)該可以看懂吧。
<html>
<head>
</head>
<body>
</body>
<script language="vbscript">
<!--
MsgBox"歡迎光臨我的網(wǎng)站！"
-->
</script>
</html>
Q: 頁面自動刷新說明 。
A: 當(dāng)你做網(wǎng)頁時(shí)，是不是有的時(shí)候想讓你的網(wǎng)頁自動不停刷新，或者過一段時(shí)間自動跳轉(zhuǎn)到另外一個(gè)你自己設(shè)定的頁面？其實(shí)實(shí)現(xiàn)這個(gè)效果非常地簡單，而且這個(gè)效果甚至不能稱之為特效。你只要把如下代碼加入你的網(wǎng)頁中就可以了。
1，頁面自動刷新：把如下代碼加入<head>區(qū)域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次頁面.
2，頁面自動跳轉(zhuǎn)：把如下代碼加入<head>區(qū)域中<meta http-equiv="refresh" content="20;url=http://www.163.com">,其中20指隔20秒后跳轉(zhuǎn)到http://www.163.com頁面。
Q: 鼠標(biāo)箭頭變十字架代碼(對一些特殊的網(wǎng)頁有用) .
A: 你們自己試試效果就知道了.
<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>
<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>
【貼上】然後切換到您的網(wǎng)頁，按『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>
【貼上】然後切換到您的網(wǎng)頁，按『Ctrl+V』將剛剛複製的程式碼貼在<body>之後任何位置。
【修改程式碼】
若想改改線的顏色，那就改background-color:#00eeff;這部份，後面的顏色碼就行了。
Q: 網(wǎng)站鼠標(biāo)點(diǎn)擊有煙花效果的代碼 .
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>
<body bgcolor="#fef4d9" OnLoad="initMouseEvents()">
<div id="sparks">
<div id="sDiv0" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">a </div>
<div id="sDiv1" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">b </div>
<div id="sDiv2" style="position:absolute; visibility: hidden;"><font face="arial black" color="blue">c </div>
<div id="sDiv3" style="position:absolute; visibility: hidden;"><font face="arial black" color="red">d </div>
<div id="sDiv4" style="position:absolute; visibility: hidden;"><font face="arial black" color="orange">e </div>
<div id="sDiv5" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">f </div>
<div id="sDiv6" style="position:absolute; visibility: hidden;"><font face="arial black" color="green">g </div>
<div id="sDiv7" style="position:absolute; visibility: hidden;"><font face="arial black" color="skyblue">h </div>
<div id="sDiv8" style="position:absolute; visibility: hidden;"><font face="arial black" color="yellow">i </div>
<div id="sDiv9" style="position:absolute; visibility: hidden;"><font face="arial black" color="white">j </div>
</div>
Q: 文本隨機(jī)輸出，可以用來作公告欄，一個(gè)字一個(gè)字的輸出，不錯。。。
A: 腳本說明:
第一步:把如下代碼加入<head>區(qū)域中
<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Tarjei Davidsen (the@rescueteam.com) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- 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時(shí)代的逐步到來,人們對網(wǎng)絡(luò)的認(rèn)識與感知越來越深刻",
"上網(wǎng)主要是進(jìn)行web頁面瀏覽，所以web頁面的精彩程度對一個(gè)網(wǎng)站的生",
"人通過制作個(gè)人主頁展現(xiàn)自己的才華，而且，由于出現(xiàn)了多種制作網(wǎng)頁的軟件",
"但是，光用軟件就成制作出你想要的各種頁面效果嗎？答案肯定是否定的但是，光用軟件就成制作出你想要的各種頁面效果嗎？答案肯定是否定的",
"JavaScript是Netscape(網(wǎng)景)公司首先推出的一種針對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>區(qū)域中
<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()">
Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=348254
相關(guān)文章
這篇文章主要介紹了Javascript基礎(chǔ)教程之if條件語句,需要的朋友可以參考下2015-01-01
這兩個(gè)事件的觸發(fā)表現(xiàn)真的就是你想要的嗎？在IE下確實(shí)有你需要的兩個(gè)這樣事件：onmouseenter 和 onmouseleave。但很不幸FF等其他瀏覽器并不支持2013-08-08
下面小編就為大家?guī)硪黄獪\談javascript中的加減時(shí)間。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
Javascript Math ceil()、floor()、round()三個(gè)函數(shù)的區(qū)別
Round是四舍五入的。。。Ceiling是向上取整。。float是向下取整2010-03-03
個(gè)人總結(jié)的一些關(guān)于String、Function、Array的屬性和用法
個(gè)人總結(jié)的一些關(guān)于String、Function、Array的屬性和用法...2007-01-01
在這篇文章中，我將會回顧一下js模塊化編程的基礎(chǔ)，并且將會講到一些真的非常值得一提的進(jìn)階話題，包括一個(gè)我認(rèn)為是我自創(chuàng)的模式。2014-12-12
本篇文章主要介紹了js的閉包，閉包算是js里面比較不容易理解的點(diǎn)，現(xiàn)在整理出來分享給大家，有需要的可以了解一下。2016-11-11
js nextSibling屬性和previousSibling屬性概述及使用注意
nextSibling屬性:該屬性表示當(dāng)前節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)；如果其后沒有與其同級的節(jié)點(diǎn)，則返回null;previousSibling屬性:該屬性與nextSibling屬性的作用正好相反,接下來將詳細(xì)介紹下，感興趣的你不妨了解下哦，或許對你有所幫助2013-02-02
本文給大家詳細(xì)匯總了關(guān)于window.location.hash的知識點(diǎn)，屬性以及用法等等，非常的實(shí)用，并附上了例子，有需要的小伙伴可以參考下。2015-11-11
JavaScript高級程序設(shè)計(jì)（第3版）學(xué)習(xí)筆記 概述
在JavaScript面世之初，沒有人會想到它會被應(yīng)用的如此廣泛，也遠(yuǎn)比一般人想象中的要復(fù)雜強(qiáng)大的多，在我自己學(xué)習(xí)的過程中，曾經(jīng)有過多次震撼2012-10-10