`

[收藏] 常用的 JAVASCRIPT 网页 特效

 
阅读更多


Q:
实现双击自动滚屏.
A: 将以下代码添加到需要自动滚屏的页面上

<s cript Language="Javas cript">
varcurrentpos,timer;
functioninitialize(){
timer=setInterval("scrollwindow()",1);
}
functionsc(){
clearInterval(timer);
}
functionscrollwindow(){
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" _fcksavedurl=""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"
}

elseif(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"
}
}
functionhelpor_net_hide(){
if(document.all)
document.all.tooltip2.style.visibility="hidden"
elseif(document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

functionscrolltip(){
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>Thenewswillappearherewhenthepagehasfinishedloading.
</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>

【貼上】然後切換到您的網頁,按『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; 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()">

分享到:
评论

相关推荐

    常用JAVASCRIPT代码特效

    这里收藏了平时常用的JAVASCRIPT特效网页实例!对做网页特效绝对有用,绝对货真价实!

    javascript网页特效实例大全

    2.2 常用事件及处理 28 2.2.1 浏览器事件 29 2.2.2 鼠标事件 29 2.2.3 文本框事件 30 2.2.4 其他事件 31 2.3 什么是框架 31 2.4 使用框架 32 2.5 小结 32 第3章 链接类特效 33 3.1 按时消失的链接 34 3.2 ...

    常用的JAVASCRIPT脚本特效

    这是我个人总结并整理出来的 很值得收藏哦

    网页javascript常用代码收藏

    代码很全,用于控制网页,实现网页的种种特效, 酷毙了!

    60个网页特效(js+flash)

    在这个几盒内包括很多网页中常用的效果比如:顶部收缩广告效果、定时关闭的背投广告代码、JS图片卷帘门效果、随数字快速翻动幻灯代码等等,精心收藏的,分享出来,希望大家喜欢!

    必会的常用javascript技术

    培训主要学习以下几个知识点: 1、制作带数字导航的横幅广告 2、实现无缝垂直向上滚动特效 3、实现漂浮广告 4、网页常用特效(实现加入收藏、设为首页和屏蔽右键功能

    程序天下:JavaScript实例自学手册

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    《程序天下:JavaScript实例自学手册》光盘源码

    第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...

    页面常用的JS脚本小结

    精心整理了 站长常用的200个js代码。别说以后找不到哦。快收藏吧:)

    PHP程序开发范例宝典III

    境配置、表单及表单元素的应用、CSS与JavaScript脚本的应用、验证控件、构建PHP动态网页、PHP与MySQL的数据库技术、PHP与其他数据库技 术、SQL查询相关技术、MySQL高级应用技术、字符串的处理技术、PHP面向对象编程...

    jQuery权威指南366页完整版pdf和源码打包

    4.9 网页选项卡的应用 4.10 综合案例分析—删除数据时的提示效果在项目中的应用 4.10.1 需求分析 4.10.2 效果界面 4.10.3 功能实现 4.10.4 代码分析 4.11 本章小结 第5章 jquery的动画与特效 5.1 ...

Global site tag (gtag.js) - Google Analytics