JavaScripts 效果实例
横向和纵向滚动条的显隐
<body style="overflow-y:hidden"> 去掉x轴
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显
<body style="overflow-x:hidden"> 去掉y轴
<body scroll="no">不显
页面跳转
Window.location.href 跳转到指定页面
Window.history.back 后退
Window.history.forward：前进
Window.history.go(n|URL)：在历史访问记录列表中跳转
表格变色
<TD onmouseover="this.style.backgroundColor='#FFFFFF'"
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand">
onmouseout="this.style.backgroundColor=''"
style="CURSOR: hand">
禁止复制，鼠标拖动选取
<body ondragstart=window.event.returnValue=false oncontextmenu=window.event.returnValue=false onselectstart=event.returnValue=false>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()">
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()">
普通iframe页面
<iframe name="name" src="main.htm" width="450" height="287" scrolling="Auto" frameborder="0"></iframe>
iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>
iframe自适应高度
<iframe name="pindex" src="index.asp" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['pindex'].style.height=pindex.document.body.scrollHeight" ></iframe>
让IFRAME框架内的文档的背景透明
<iframe src="about:<body style='background:transparent'>" allowtransparency></iframe>
IE地址栏前换成自己的图标&可以在收藏夹中显示出你的图标
<link rel="Shortcut Icon" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
<link rel="Bookmark" href="favicon.ico">
字号缩放
越来越多的人长时间的泡网，眼镜的普及率也越来越高，让文字大点，让更多的用户看的更清楚。
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
<script type="text/javascript">
function doZoom(size)
{document.getElementById('zoom').style.fontSize=size+'px';}
</script>
<span id="zoom">需要指定大小的文字</span>
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
收藏夹、首页和源代码
收藏夹：window.external.addFavorite (location.href，“科技”)
首页： this.setHomePage('http://www.webkey.cn/lanren/')
查看源代码： window.location=”view-source:”+this.location.href
记录并显示网页的最后修改时间
<script language=JavaScript>
document.write("最后更新时间: " + document.lastModified + "")
</script>
document.write("最后更新时间: " + document.lastModified + "")
</script>
加在HEAD里 禁止缓存
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<meta http-equiv="Pragma" CONTENT="no-cache">
打开窗口即最大化
<script language="JavaScript">
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
<!-- Begin
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
// End -->
</script>
加入背景音乐
<bgsound src="mid/windblue[1].mid" loop="-1"> 只适用于IE
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
<embed src="music.mid" autostart="true" loop="true" hidden="true"> 对Netscape ,IE 都适用
滚动
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>滚动信息
</marquee>
<marquee direction=up height=146 onmouseout=start() onmouseover=stop() scrollAmount=2>滚动信息
</marquee>
消除ie6自动出现的图像工具栏
<IMG SRC="mypicture.jpg" HEIGHT="100px" WIDTH="100px" GALLERYIMG="no">
禁止页面正文内容被选取
<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return
false"onmouseup="document.selection.empty()">
false"onmouseup="document.selection.empty()">
不能点右键，不用CTRL+A，不能复制
<body oncontextmenu="window.event.returnValue=false"
onkeypress="window.event.returnValue=false"
onkeydown="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
onkeypress="window.event.returnValue=false"
onkeydown="window.event.returnValue=false"
onkeyup="window.event.returnValue=false"
ondragstart="window.event.returnValue=false"
onselectstart="event.returnValue=false">
</body>
禁用右键菜单
判断鼠标单击所使用的按键，通过event对象的button属性实现，IE和Netscape略有不同。
获得鼠标所在标签
监听body的onmouseover事件
获得事件的坐标
获得坐标所在对象：oElement = document . elementFromPoint (iX ,iY )
随机变换背景图象（一个可以刷新心情的特效）
<Script Language="JavaScript">
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("<BODY BACKGROUND="+image[number]+">");
</Script>
image = new Array(4); //定义image为图片数量的数组
image [0] = 'tu0.gif' //背景图象的路径
image [1] = 'tu1.gif'
image [2] = 'tu2.gif'
image [3] = 'tu3.gif'
image [4] = 'tu4.gif'
number = Math.floor(Math.random() * image.length);
document.write("<BODY BACKGROUND="+image[number]+">");
</Script>
动态切换图片
image设置src属性动态置换图片
表单元素
所有的表单元素具有的属性： Type name value form(该元素引用的只读form)
设置状态栏
window.status='网站建设http://www.webmake.cn/'
离开时询问
Onbeforeunload事件处理：退出浏览器，刷新页面，连接到其他页面时触发
Window.confirm(text) 则会确认对话框
图片表单按钮
<form id="form1" name="form1" method="post" action="">
<img src="login.gif" width="62" height="22" onclick="document.form1.submit()" />
</form>
<img src="login.gif" width="62" height="22" onclick="document.form1.submit()" />
</form>
手型鼠标
style="cursor:hand"
如何关闭层
<div id="Layer1"></div>
<a href="#" onClick="Layer1.style.display='none'">关闭层</a>
<a href="#" onClick="Layer1.style.display='none'">关闭层</a>
关闭窗口的脚本
<a href=javascript:close()>[关闭窗口]</a>
如果文字过长,则将过长的部分变成省略号显示
<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue;overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>
进入主页后自动最大化
<script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
</script>