JavaScript网页特效学习笔记1

在网络中有许多的特效都是用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="后退" οnclick="goback()"/>
<input type="button" value="刷新" οnclick="refresh()"/>
<input type="button" value="前进" οnclick="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 οnlοad="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" οnunlοad="window.alert('谢谢你打开我的网页！')">
</body>
</html>

8、设为主页的特效

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

<html>
<head>
<title>主页</title>
</head>
<body>
<a href="#" οnclick="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.οnmοusemοve=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特效，以后会慢慢的写，如果有不足的地方，希望大家提出来。

JavaScript网页特效学习笔记1相关推荐

html5猜颜色游戏,好看漂亮的html5网页特效学习笔记(3)_猜猜下一个颜色是什么？...
效果: 根据给出的两个连续颜色,玩家需要猜出下一个是什么颜色随机关卡使用vw,vh,vmin,vmax来屏幕自适应很难玩 html+css+javascript,但js很短并不难,上手难度:简单 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息作者: 杨磊张志美丛书名: 百炼成钢系列丛书出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
7 种 Javascript 常用设计模式学习笔记
7 种 Javascript 常用设计模式学习笔记由于 JS 或者前端的场景限制,并不是 23 种设计模式都常用. 有的是没有使用场景,有的模式使用场景非常少,所以只是列举 7 个常见的模式本文的 ...
JavaScript 权威指南-学习笔记（一）
本文所有教程及源码.软件仅为技术研究.不涉及计算机信息系统功能的删除.修改.增加.干扰,更不会影响计算机信息系统的正常运行.不得将代码用于非法用途,如侵立删! JavaScript 权威指南-学习笔记 ...
JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
JavaScript高级程序设计学习笔记（三）
分享一下第五章(引用类型)的笔记,内容比较多,我拆成了两部分,今天这部分是关于Object.Array.Date和RegExp类型的. 以下的笔记是书上一些我以前学习的时候,没有太重视的js基础知识, ...
JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...

JavaScript网页特效学习笔记1

JavaScript网页特效学习笔记1相关推荐

最新文章

热门文章