做网页的一些技巧(续)


Posted in Javascript onFebruary 01, 2007

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=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=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.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>

【?上】然後切?Q到您的??,按『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>

【?上】然後切?Q到您的??,按『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; 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 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

Javascript 相关文章推荐
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 Javascript
在模板页面的js使用办法
Apr 01 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
Sep 24 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
js Canvas绘制圆形时钟教程
Feb 06 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
使用vant的地域控件追加全部选项
Nov 03 Javascript
JavaScript 异步时序问题
Nov 20 Javascript
javascript的函数
Jan 31 #Javascript
Flash对联广告的关闭按钮讨论
Jan 30 #Javascript
Js之软键盘实现(js源码)
Jan 30 #Javascript
关于图片验证码设计的思考
Jan 29 #Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 #Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 #Javascript
判断页面是关闭还是刷新的js代码
Jan 28 #Javascript
You might like
js下函数般调用正则的方法附代码
2008/06/22 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
jquery select操作的日期联动实现代码
2009/12/06 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
详解如何在angular2中获取节点
2017/11/23 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
js判断节假日实例代码
2017/12/27 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
python树的同构学习笔记
2019/09/14 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
金宝贝童装官网:Gymboree
2016/08/31 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
Sandro法国官网:法国成衣品牌
2019/08/28 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
金融专业个人求职信范文
2013/11/28 职场文书
企业道德讲堂实施方案
2014/03/19 职场文书
军训口号
2014/06/13 职场文书
2014年电工工作总结
2014/11/20 职场文书
劳模先进事迹材料
2014/12/24 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL