网页最常用的js特效集
发布时间：01/15 来源： 浏览：
关键词：
典型特效
1、收藏本站
说明：点击即可把你的网站添加到浏览器的收藏菜单下
代码：
<span style="CURSOR: hand" onClick="window.external.addFavorite(www.111cn.net','中国WEB第一站")" title="收藏盐城人
才网">收藏本站</span>
2、设为首页
说明：点击即可把你的网站设置为浏览器的起始页
代码：
<span onclick="var
strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ycrc.com.cn');"
style="CURSOR: hand">设为首页</span>
3、去掉超链接的下划线
说明：有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！
注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！
代码：
<style TYPE="text/css">
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
-->
</style>
4、自动刷新网页
说明：在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间，以
秒为单位。targer.html为你想转向的目标页,若为本页则为自动刷新本页。
代码：
<meta http-equiv="refresh" content="300; url=target.html">
5、刷新本页
说明：点击即可刷新本页。
代码：
<a href="javascript:location.reload()" target="_self">刷新</a>
6、返回到上一页
说明：点击即可返回到上一页面。
代码：
<a href="javascript:history.back(-1)">返回上一页</a>
7、跳出小窗口
说明：在打开有下面这段代码的页面时将会跳出一个468x60大小的小窗口。“window.html”为跳出的小窗口里所要显示的网页。toolbar、sta
tus、menubar、scrollbars、设置小窗口的工具栏、状态栏、菜单栏及滚动条的有无，resizable设置是否可让浏览者改变小窗口大小，width
、height设置小窗口的宽度以及高度。(不过这样的小窗口一般是不受欢迎的哦！)
代码：
<script language="JavaScript">
window.open("window.html","www_ycrc_com_cn","toolbar=no, status=no,menubar=no,
scrollbars=no,resizable=no,width=468,height=60,left=200,top=50");
</script>
8、自动关闭窗口
说明：在网页源代码中加入下面的代码，则该窗口将在20秒钟之后自动关闭！这与跳出式小窗口配合使用是再好不过啦！代码中“i=20”表示
关闭的延迟时间为20秒，可任意修改。
代码：
<script language="javascript">
<!--
function clock(){i=i-1
document.title="本窗口将在"+i+"秒后自动关闭!";
if(i>0)setTimeout("clock();",1000);
else self.close();}
var i=20
clock();
//-->
</script>
9、给页面加保护
说明：如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。当在网页里按下鼠标右键时，出
现的不是想要的快捷菜单而是一个警告窗口。“\n\n”表示换行。
代码：
<script language="JavaScript">
function ycrc_com_cn()
{
if (event.button==2)alert(' 仅供浏览!谢谢!\n\n若有问题请与我联系! ')
}
</script>
然后把<body> 改为
<body onmousedown="ycrc_com_cn()">
10、固定字号大小
说明：你是否有过这样的经历：一个布置得很好的网页，当浏览时把浏览器的字号设置成大或小时，漂亮的网页马上面目全非了。因为字的大
小变了，版式自然乱了。现在好了，只要把下面这段代码加入到网页源文件的<head>与</head>之间就行了(对用<font>标签定义的文字无效)。
代码：
<style type="text/css">
<!--
body {font-size:9pt}
td {font-size:9pt}
-->
</style>
11、状态栏里的动态欢迎语
说明：浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！
代码：
<script language="JavaScript">
<!--
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage
}
function clearMessage() {
this.pos = POSITION
}
var POSITION = 100
var DELAY = 5
var MESSAGE = "欢迎光临! Welcome to WWW.YCRC.COM.CN "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " "
}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
} else {
window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
return false
}
return true
}
snapIn(100,0);
// -->
</script>
12、保护自己的页面不被别人放在框架中
说明：有些人真是懒得可以，把别人做好的网页往自己网页的框架(Frame)里一放，别人的成果就变成了自己的，而且看不出该网页的真实地址
！为了防止你的成果被这些人所剽窃，你就可以在你网页的HTML里加入下面这段代码，这样，你的网页便总是在整个窗口中打开了。
代码：
<Script LANGUAGE="JavaScript">
if(self!=top){top.location=self.location;}
</script>
按钮特效
13、全屏显示
说明：真正的全屏显示,只能用ALT+F4关闭
代码：
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'www_ycrc_com_cn',
'fullscreen')">
14、打开一个全屏窗口
说明：用按钮打开一个全屏窗口
代码：
<input type="button" onClick="www_ycrc_com_cn()" value="试试看" name="button">
<script>
<!--
function www_ycrc_com_cn(){
var targeturl="http://www.ycrc.com.cn"
newwin=window.open("","","scrollbars")
if (document.all){
newwin.moveTo(0,0)
newwin.resizeTo(screen.width,screen.height)
}
newwin.location=targeturl
}
//-->
</script>
15、各种用途的按钮大集合
说明：各种用途的按钮大集合
代码：
<input TYPE="button" NAME="view" VALUE="查看源代码" OnClick="window.location='view-source:' +window.location.href" >
<input TYPE="button" VALUE="返回上一步" ONCLICK="history.back(-1)">
<input TYPE="button" VALUE="刷新按钮一" ONCLICK="ReloadButton()">
<script language="JavaScript">
<!--
function ReloadButton(){location.href="3.html";}
// -->
</script>
<p>
<input TYPE="button" VALUE="刷新按钮二" onClick="history.go(0)">
<input TYPE="button" VALUE="回首页按钮" ONCLICK="HomeButton()">
<script language="JavaScript">
<!--
function HomeButton(){location.href="http://www.ycrc.com.cn";}
// -->
</script>
<input TYPE="button" VALUE="弹出警告框" ONCLICK="AlertButton()">
<script language="JavaScript">
<!--
function AlertButton(){window.alert("今天你喝了没有？
");}
// -->
</script>
<p>
<input TYPE="button" VALUE="状态栏信息" ONCLICK="StatusButton()">
<script language="JavaScript">
<!--
function StatusButton(){window.status="你好吗？";}
// -->
</script>
<input TYPE="button" VALUE="背景色变换" onClick="BgButton()">
<script language="JavaScript">
<!--
function BgButton(){
if (document.bgColor=='#3399ff')
{document.bgColor='#00ccff';}
else{document.bgColor='#3399ff';}
}
// -->
</script>
<input TYPE="button" VALUE="打开新窗口" ONCLICK="NewWindow()">
<script language="JavaScript">
<!--
function
NewWindow(){window.open("http://www.ycrc.com.cn","","height=600,width=800,left=10,top=10,status=no,location=no,toolbar=no,
directories=no,menubar=no");}
// -->
</script>
16、特殊效果的按钮
说明：特殊效果的按钮
代码：
<style type="text/css">
<!--
.over {color:yellow; background: navy}
.down {color:yellow; background: navy; font-style: italic}
-->
</style>
<input
type="Button" value="按钮也疯狂" name="Button"
onMouseOver="this.className='over';"
onMouseOut="this.className='';this.value='按钮也疯狂'"
onMouseDown="this.className='down';"
onMouseUp="this.className='over';"
onClick="this.value='我真的好喜欢你！'">
17、让屏幕抖动一阵
说明：让屏幕抖动一阵
代码：
<input onclick="www_ycrc_com_cn(2)" type="button" value="地震啦！！！">
<script language="JavaScript">
<!--
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != null) {
parent.main.location.href=form.select1.options[myindex].value;
}
}
// -->
</script>
<script language="JavaScript1.2">
<!--
function www_ycrc_com_cn(n) {
if (window.top.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
}
}
}
alert(" 没吓坏吧!!! ");
}
// -->
</script>
1、收藏本站
说明：点击即可把你的网站添加到浏览器的收藏菜单下
代码：
<span style="CURSOR: hand" onClick="window.external.addFavorite(www.111cn.net','中国WEB第一站")" title="收藏盐城人
才网">收藏本站</span>
2、设为首页
说明：点击即可把你的网站设置为浏览器的起始页
代码：
<span onclick="var
strHref=window.location.href;this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.ycrc.com.cn');"
style="CURSOR: hand">设为首页</span>
3、去掉超链接的下划线
说明：有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！
注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！
代码：
<style TYPE="text/css">
<!--
A:link{text-decoration:none}
A:visited{text-decoration:none}
A:hover {color: #ff00ff;text-decoration:underline}
-->
</style>
4、自动刷新网页
说明：在HTML的与之间加入下面这段代码，则在5分钟之后正在浏览的页面将会自动变为target.html这一页。代码中300为刷新的延迟时间，以
秒为单位。targer.html为你想转向的目标页,若为本页则为自动刷新本页。
代码：
<meta http-equiv="refresh" content="300; url=target.html">
5、刷新本页
说明：点击即可刷新本页。
代码：
<a href="javascript:location.reload()" target="_self">刷新</a>
6、返回到上一页
说明：点击即可返回到上一页面。
代码：
<a href="javascript:history.back(-1)">返回上一页</a>
7、跳出小窗口
说明：在打开有下面这段代码的页面时将会跳出一个468x60大小的小窗口。“window.html”为跳出的小窗口里所要显示的网页。toolbar、sta
tus、menubar、scrollbars、设置小窗口的工具栏、状态栏、菜单栏及滚动条的有无，resizable设置是否可让浏览者改变小窗口大小，width
、height设置小窗口的宽度以及高度。(不过这样的小窗口一般是不受欢迎的哦！)
代码：
<script language="JavaScript">
window.open("window.html","www_ycrc_com_cn","toolbar=no, status=no,menubar=no,
scrollbars=no,resizable=no,width=468,height=60,left=200,top=50");
</script>
8、自动关闭窗口
说明：在网页源代码中加入下面的代码，则该窗口将在20秒钟之后自动关闭！这与跳出式小窗口配合使用是再好不过啦！代码中“i=20”表示
关闭的延迟时间为20秒，可任意修改。
代码：
<script language="javascript">
<!--
function clock(){i=i-1
document.title="本窗口将在"+i+"秒后自动关闭!";
if(i>0)setTimeout("clock();",1000);
else self.close();}
var i=20
clock();
//-->
</script>
9、给页面加保护
说明：如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。当在网页里按下鼠标右键时，出
现的不是想要的快捷菜单而是一个警告窗口。“\n\n”表示换行。
代码：
<script language="JavaScript">
function ycrc_com_cn()
{
if (event.button==2)alert(' 仅供浏览!谢谢!\n\n若有问题请与我联系! ')
}
</script>
然后把<body> 改为
<body onmousedown="ycrc_com_cn()">
10、固定字号大小
说明：你是否有过这样的经历：一个布置得很好的网页，当浏览时把浏览器的字号设置成大或小时，漂亮的网页马上面目全非了。因为字的大
小变了，版式自然乱了。现在好了，只要把下面这段代码加入到网页源文件的<head>与</head>之间就行了(对用<font>标签定义的文字无效)。
代码：
<style type="text/css">
<!--
body {font-size:9pt}
td {font-size:9pt}
-->
</style>
11、状态栏里的动态欢迎语
说明：浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！
代码：
<script language="JavaScript">
<!--
function statusMessageObject(p,d) {
this.msg = MESSAGE
this.out = " "
this.pos = POSITION
this.delay = DELAY
this.i = 0
this.reset = clearMessage
}
function clearMessage() {
this.pos = POSITION
}
var POSITION = 100
var DELAY = 5
var MESSAGE = "欢迎光临! Welcome to WWW.YCRC.COM.CN "
var scroll = new statusMessageObject()
function scroller() {
for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
scroll.out += " "
}
if (scroll.pos >= 0)
scroll.out += scroll.msg
else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
window.status = scroll.out
scroll.out = " "
scroll.pos--
if (scroll.pos < -(scroll.msg.length)) {
scroll.reset()
}
setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
var msg = scroll.msg
var out = ""
for (var i=0; i<position; i++)
{out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++)
{out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ')
{position++ }
jumpSpaces = 100-position
} else if (jumpSpaces > 3)
{jumpSpaces *= .75}
else
{jumpSpaces--}
if (position != msg.length) {
var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
} else {
window.status=""
jumpSpaces=0
position=0
cmd = "snapIn(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,scroll.delay);
return false
}
return true
}
snapIn(100,0);
// -->
</script>
12、保护自己的页面不被别人放在框架中
说明：有些人真是懒得可以，把别人做好的网页往自己网页的框架(Frame)里一放，别人的成果就变成了自己的，而且看不出该网页的真实地址
！为了防止你的成果被这些人所剽窃，你就可以在你网页的HTML里加入下面这段代码，这样，你的网页便总是在整个窗口中打开了。
代码：
<Script LANGUAGE="JavaScript">
if(self!=top){top.location=self.location;}
</script>
按钮特效
13、全屏显示
说明：真正的全屏显示,只能用ALT+F4关闭
代码：
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'www_ycrc_com_cn',
'fullscreen')">
14、打开一个全屏窗口
说明：用按钮打开一个全屏窗口
代码：
<input type="button" onClick="www_ycrc_com_cn()" value="试试看" name="button">
<script>
<!--
function www_ycrc_com_cn(){
var targeturl="http://www.ycrc.com.cn"
newwin=window.open("","","scrollbars")
if (document.all){
newwin.moveTo(0,0)
newwin.resizeTo(screen.width,screen.height)
}
newwin.location=targeturl
}
//-->
</script>
15、各种用途的按钮大集合
说明：各种用途的按钮大集合
代码：
<input TYPE="button" NAME="view" VALUE="查看源代码" OnClick="window.location='view-source:' +window.location.href" >
<input TYPE="button" VALUE="返回上一步" ONCLICK="history.back(-1)">
<input TYPE="button" VALUE="刷新按钮一" ONCLICK="ReloadButton()">
<script language="JavaScript">
<!--
function ReloadButton(){location.href="3.html";}
// -->
</script>
<p>
<input TYPE="button" VALUE="刷新按钮二" onClick="history.go(0)">
<input TYPE="button" VALUE="回首页按钮" ONCLICK="HomeButton()">
<script language="JavaScript">
<!--
function HomeButton(){location.href="http://www.ycrc.com.cn";}
// -->
</script>
<input TYPE="button" VALUE="弹出警告框" ONCLICK="AlertButton()">
<script language="JavaScript">
<!--
function AlertButton(){window.alert("今天你喝了没有？
");}// -->
</script>
<p>
<input TYPE="button" VALUE="状态栏信息" ONCLICK="StatusButton()">
<script language="JavaScript">
<!--
function StatusButton(){window.status="你好吗？
";}// -->
</script>
<input TYPE="button" VALUE="背景色变换" onClick="BgButton()">
<script language="JavaScript">
<!--
function BgButton(){
if (document.bgColor=='#3399ff')
{document.bgColor='#00ccff';}
else{document.bgColor='#3399ff';}
}
// -->
</script>
<input TYPE="button" VALUE="打开新窗口" ONCLICK="NewWindow()">
<script language="JavaScript">
<!--
function
NewWindow(){window.open("http://www.ycrc.com.cn","","height=600,width=800,left=10,top=10,status=no,location=no,toolbar=no,
directories=no,menubar=no");}
// -->
</script>
16、特殊效果的按钮
说明：特殊效果的按钮
代码：
<style type="text/css">
<!--
.over {color:yellow; background: navy}
.down {color:yellow; background: navy; font-style: italic}
-->
</style>
<input
type="Button" value="按钮也疯狂" name="Button"
onMouseOver="this.className='over';"
onMouseOut="this.className='';this.value='按钮也疯狂'"
onMouseDown="this.className='down';"
onMouseUp="this.className='over';"
onClick="this.value='我真的好喜欢你！'">
17、让屏幕抖动一阵
说明：让屏幕抖动一阵
代码：
<input onclick="www_ycrc_com_cn(2)" type="button" value="地震啦！！！">
<script language="JavaScript">
<!--
function surfto(form) {
var myindex=form.select1.selectedIndex
if (form.select1.options[myindex].value != null) {
parent.main.location.href=form.select1.options[myindex].value;
}
}
// -->
</script>
<script language="JavaScript1.2">
<!--
function www_ycrc_com_cn(n) {
if (window.top.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
}
}
}
alert(" 没吓坏吧!!! ");
}
// -->
</script>
