做网页的一些技巧（续）

牛牛爱子曼

牛牛爱子曼

2016-02-19 10:49

今天图老师小编给大家展示的是做网页的一些技巧（续），精心挑选的内容希望大家多多支持、多多分享，喜欢就赶紧get哦！

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="http://xiaoguo001.nease.net" 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="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 区域中
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 时代的逐步到来 , 人们对网络的认识与感知越来越深刻 ",
" 上网主要是进行 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 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=virtualThe 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=http://www.163.com",其中20指隔20秒后跳转到http://www.163.com页面。

Q: 鼠标箭头变十字架代码(对一些特殊的网页有用) .
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.clientXdocument.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 id="leftright" style="width:expression(document.body.clientWidth-2)"
/div
div id="topdown" style="height:expression(document.body.clientHeight-2)"
/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

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: 文本随机输出，可以用来作公告栏，一个字一个字的输出，不错。。。
A: 脚本说明:
第一步:把如下代码加入head区域中
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; imax; 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 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=virtualThe news will appear here when the page has finished loading./textarea
/form


第三步:把body改为
body bgcolor="#fef4d9" OnLoad="textticker()"

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）

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

（本文来源于图老师网站，更多请访问http://m.tulaoshi.com/webkaifa/）
展开更多 （50%）
分享

猜你喜欢

做网页的一些技巧（续）

Web开发
做网页的一些技巧（续）

做网页的一些技巧

Web开发
做网页的一些技巧

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

网页设计常用的一些技巧

Web开发
网页设计常用的一些技巧

网页文字应用CSS的一些技巧

Web开发
网页文字应用CSS的一些技巧

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

详细解析网页改版的一些心得技巧

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
详细解析网页改版的一些心得技巧

网页文字应用CSS设计的一些技巧

Web开发
网页文字应用CSS设计的一些技巧

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

MSSQL数据类型及长度限制详细说明

MSSQL数据类型及长度限制详细说明

Ubuntu安装PlayOnLinux的步骤

Ubuntu安装PlayOnLinux的步骤
下拉加载更多内容 ↓