您的位置：首页 > Web前端 > JavaScript

JavaScript网页特效学习笔记1

2012-05-23 15:14 411 查看

在网络中有许多的特效都是用JavaScript编写的，这几天通过看书和看视频，简单的学习了几个网页常见的特效，和大家分享一下。

1、使HTML页面反向显示

我们浏览网页的时候，都是正向显示的。可以通过html的dir属性可以设置网页的反向显示，一些其他的控件都有这个属性，控制文本的显示方向。

<html dir="rtl">//rtl代表从右向左显示，默认是ltr
<head>
<title>html页面反向显示</title>
</head>
<body>
本页面的是反向显示的。
</body>
</html>

2、实现网页的自动最大化

有的时候，我们打开网页时，该网页会自动最大化。我们可以使用javascript的screen对象，实现网页最大化。首先使用self（代表当前窗口对象本身）调用moveTo方法，将窗口移动到坐标（0,00）处，之后调整窗口的大小，宽和高都是屏幕的可用高和宽。

<html>
<head>
<title>页面自动最大化</title>
<script type="text/javascript">
self.moveTo(0,0);//使用self代表自身这个窗口，调用moveTo方法
self.resizeTo(screen.availWidth,screen.availHeight);//将窗口的大小调整为屏幕的可用大小
</script>
</head>
<body>
本页面打开的时候会自动化。
</body>
</html>

3、页面的自动刷新

想要实现页面的自动刷新有两种方法，第一种是用html的meta属性，第二是调用window对象的location对象的reload()方法。

<html>
<head>
<title>实现页面的自动刷新</title>
<!--<meta http-equiv="refresh" content="3">第一种方法-->
<script type="text/javascript">
function reload()
{
window.location.reload();//第二种方法
}
setInterval("reload()",3000);
</script>
</head>
<body>
这个页面将在3秒后刷新
</body>
</html>

4、实现页面的后退，前进，刷新

后退、前进、刷新这些都是网页中常见的操作，我们可以通过JavaScript代码完成这些功能。使用history对象的go方法可以实现页面的前进，后退和刷新。

<html>
<head>
<title>实现页面的后退、刷新、前进</title>
<script type="text/javascript">
function goback()
{
history.go(-1);
}
function refresh()
{
history.go(-0);
}
function forward()
{
history.go(+1);
}

</script>
</head>
<body>
<input type="button" value="后退" onclick="goback()"/>
<input type="button" value="刷新" onclick="refresh()"/>
<input type="button" value="前进" onclick="forward()"/>
</body>
</html>

5、让别人看不到网页的源代码

有的时候为了让自己做的网页的不被他人知道怎么做的，可以通过将网页的源代码进行屏蔽，这样当他人查看网页源代码的时候就看不到自己编写的网页源代码了。

<html>
<head>
<title>保护网页的源代码</title>
<script type="text/javascript">
function clear()
{
source = document.body.innerHTML;
document.open();
document.write("代码已经被屏蔽!");
document.close();
document.title = "看不到源代码";
document.body.innerHTML = source;
}
</script>
</head>
<body onload="clear()">
这个网页看不到源代码！
</body>
</html>

6、打开网页时，弹出欢迎的对话框

有时上网的时候会发现，一打开网页会弹出一个对话框，欢迎进入本网站，其实这是通过JavaScript中的alert方法实现的。

<html>
<head>
<title>进入页面同时弹出欢迎对话框</title>
</head>
<body>
<script type="text/javascript">
alert("欢迎进入本网站！");
</script>
</body>
</html>

7、关闭页面弹出对话框

有一些网页会在你关闭的时候，告诉你“谢谢你进入本网站”的类似的话，其实这是通过JavaScript中的onunload事件和alert方法来实现的，onunload事件是在离开页面的时候发生。

<html>
<head>
<title>离开页面</title>
</head>
<body bgcolor="#fef4d9" onunload="window.alert('谢谢你打开我的网页！')">
</body>
</html>

8、设为主页的特效

不管是什么网站都有“设为主页”的功能，这个功能做起来十分的简单，用到了behavior属性和setHomePage方法的结合可以将指定的网页设为主页。

<html>
<head>
<title>主页</title>
</head>
<body>
<a href="#" onclick="this.style.behavior='url(#default#homepage)';
this.setHomePage('http://www.google.com');">设为主页
</a>
</body>
</html>

9、类似浮动广告的特效

在一些的网站都有浮动的广告，其实都是用JavaScript作的，通过改变坐标的位置，实现动态的效果，下边的这个特效是我看高洛峰老师的视频而来的，只不过动的是一个绿色的div。要做到实现到边框的时候往回走，必须使x，y的坐标大于或等于窗口的大小减去自身的大小。这需要用到这四个属性：clientWidth，offsetWidth，clientHeight，offsetHeight。

<html>
<head>
<title>类似浮动广告</title>
</head>
<body>
<div id="one" style="background:green;position:absolute;left:0;top:0;						width:100px;height:100px">
我是广告
</div>
<script type="text/javascript">
var x = 0;//定义起始的x坐标
var y = 0;//定义起始的y坐标
var xs = 10;//定义x加速度
var xy = 10;//定义y速度
var one = document.getElementById("one");//得到div
function move()//定义移动的方法
{
x+=xs;
y+=xy;
if(x>=document.body.clientWidth-one.offsetWidth-20 || x<=0)
{
xs = -1*xs;
}
if(y>=document.body.clientHeight-one.offsetHeight-20||y<=0)
{
xy = -1*xy;
}

one.style.left = x;
one.style.top = y;

}
var dt = setInterval("move()",100);
one.onmouseover = function()
{
clearInterval(dt);
}
one.onmouseout = function()
{
dt = setInterval("move()",100);
}
</script>
</body>
</html>

10、图片跟随鼠标

有些网页你的鼠标到哪，图片就到哪，或者是窗口到哪，其实这是用了将鼠标的坐标赋给跟随的东西的坐标。

<html>
<head>
</head>
<body>
<img id="tu" style="position:absolute;left:-400px;top:-200px" src="1.gif"/>
<script>
document.onmousemove=function(e){
var ev = e||window.event;//这句话是为了兼容的，e是适用于IE以外的浏览器,event是用于IE的
var x = ev.clientX;
var y = ev.clientY;
tu.style.top=y+20;
tu.style.left=x+20;
}
</script>
</body>
</html>

今天写了10个网页的简单网页中JavaScript特效，以后会慢慢的写，如果有不足的地方，希望大家提出来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航