JavaScript网页特效学习笔记.docx

JavaScript网页特效学习笔记.docx

《JavaScript网页特效学习笔记.docx》由会员分享，可在线阅读，更多相关《JavaScript网页特效学习笔记.docx（15页珍藏版）》请在冰豆网上搜索。

JavaScript网页特效学习笔记

JavaScript网页特效学习笔记1

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

1、使HTML页面反向显示

我们浏览网页的时候，都是正向显示的。

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

[html]viewplaincopyprint?

1//rtl代表从右向左显示，默认是ltr

2

3

4

5

6本页面的是反向显示的。

7

8

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

有的时候，我们打开网页时，该网页会自动最大化。

我们可以使用javascript的screen对象，实现网页最大化。

首先使用self（代表当前窗口对象本身）调用moveTo方法，将窗口移动到坐标（0,00）处，之后调整窗口的大小，宽和高都是屏幕的可用高和宽。

[html]viewplaincopyprint?

9

10

11

12

13self.moveTo（0,0）;//使用self代表自身这个窗口，调用moveTo方法

14self.resizeTo（screen.availWidth,screen.availHeight）;//将窗口的大小调整为屏幕的可用大小

15

16

17

18本页面打开的时候会自动化。

19

20

3、页面的自动刷新

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

[html]viewplaincopyprint?

21

22

23

24

--第一种方法-->

25

26functionreload（）

27{

28window.location.reload（）;//第二种方法

29}

30setInterval（"reload（）",3000）;

31

32

33

34这个页面将在3秒后刷新

35

36

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

后退、前进、刷新这些都是网页中常见的操作，我们可以通过JavaScript代码完成这些功能。

使用history对象的go方法可以实现页面的前进，后退和刷新。

[html]viewplaincopyprint?

37

38

39

40

41functiongoback（）

42{

43history.go（-1）;

44}

45functionrefresh（）

46{

47history.go（-0）;

48}

49functionforward（）

50{

51history.go（+1）;

52}

53

54

55

56

57

58

59

60

61

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

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

[html]viewplaincopyprint?

62

12px;">

63

64

65

66functionclear（）

67{

68source=document.body.innerHTML;

69document.open（）;

70document.write（"代码已经被屏蔽!

"）;

71document.close（）;

72document.title="看不到源代码";

73document.body.innerHTML=source;

74}

75

76

77

78这个网页看不到源代码！

79

80

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

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

[html]viewplaincopyprint?

81

82

83

84

85

86

87alert（"欢迎进入本网站！

"）;

88

89

90

7、关闭页面弹出对话框

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

[html]viewplaincopyprint?

91

92

93

94

95

'）">

96

97

8、设为主页的特效

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

[html]viewplaincopyprint?

98

99

100

101

102

103

104this.setHomePage（''）;">设为主页

105

106

107

9、类似浮动广告的特效

在一些的网站都有浮动的广告，其实都是用JavaScript作的，通过改变坐标的位置，实现动态的效果，下边的这个特效是我看高洛峰老师的视频而来的，只不过动的是一个绿色的div。

要做到实现到边框的时候往回走，必须使x，y的坐标大于或等于窗口的大小减去自身的大小。

这需要用到这四个属性：

clientWidth，offsetWidth，clientHeight，offsetHeight。

[html]viewplaincopyprint?

108

109

110

111

112

113

green;position:

absolute;left:

0;top:

0;width:

100px;height:

100px">

114我是广告

115