js实现从右向左缓缓浮出网页浮动层广告的方法

这篇文章主要介绍了js实现从右向左缓缓浮出网页浮动层广告的方法,可实现右侧浮动广告的定时弹出及点击展开、折叠等功能,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了js实现从右向左缓缓浮出网页浮动层广告的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>从右向左缓缓浮出的网页浮动层广告</title> 
7. <script language="javascript"> 
8. var $ = function (d){return document.getElementById(d)}; 
9. var CLS={ 
10. create: function() { 
11. return function() { 
12. this.$ADD = function (fn){CLS.add(this,fn)}; 
13. this.init.apply(this, arguments); 
14. } 
15. }, 
16. add:function (obj,fn){ 
17. fn.apply(obj,arguments); 
18. }, 
19. enterFrame:function (){ 
20. this.onEnterFrame=function (){}; 
21. this.$PLAY = function (g){ 
22. this.enterFrameP = this.enterFrameP || 10; 
23. this.CLStimeIndex = CLS.ontimes.length; 
24. CLS.ontimes.push(this); 
25. window.clearTimeout(this.enterFrameTimeout); 
26. window.clearInterval(this.enterFrameInterval); 
27. if(g)this.enterFrameTimeout = window.setTimeout('CLS.ontimes['+this.CLStimeIndex+'].enterFrameInterval=window.setInterval("CLS.ontimes['+this.CLStimeIndex+'].onEnterFrame()",'+this.enterFrameP+')',parseInt(g*1000)); 
28. else this.enterFrameInterval = window.setInterval("CLS.ontimes["+this.CLStimeIndex+"].onEnterFrame()",this.enterFrameP); 
29. } 
30. this.$STOP = function (){ 
31. window.clearInterval(this.enterFrameInterval); 
32. } 
33. this.$SET = function (p){ 
34. this.enterFrameP = p; 
35. } 
36. }, 
37. ontimes:new Array() 
38. }; 
39. CLS.Marquee = CLS.create(); 
40. CLS.Marquee.prototype = { 
41. init:function (button,box,speed){ 
42. this.box = $(box); 
43. this.tit = $(button) 
44. this.kong = $("kong"); 
45. this.onOpen = true; 
46. this.show = false; 
47. this.time = 0; 
48. this.speed = speed; 
49. this.kong.style.height = this.box.offsetHeight +"px"; 
50. this.Maxw = this.box.offsetWidth-this.tit.offsetWidth; 
51. this.box.style.right = -this.box.offsetWidth + "px"; 
52. this.boxTop = this.kong.offsetTop; 
53. var _t = this; 
54. this.tit.onclick = function (){ 
55. this.show = true; 
56. if(_t.onOpen){ 
57. _t.onEnterFrame = _t.close; 
58. _t.onOpen = false; 
59. }else{ 
60. _t.onEnterFrame = _t.open; 
61. _t.onOpen = true; 
62. } 
63. _t.$PLAY(); 
64. }; 
65. this.$ADD(CLS.enterFrame); 
66. this.onEnterFrame = this.open; 
67. this.$PLAY(); 
68. }, 
69. open:function(){ 
70. this.tit.innerHTML = "-"; 
71. var _r = parseInt(this.box.style.right); 
72. var _b = (0 - _r)/30; 
73. this.box.style.right = (_r + _b) +"px"; 
74. this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px"; 
75. if(_b==0 && !this.show){ 
76. this.time +=10; 
77. if(this.time>=this.speed*1000){ 
78. this.show = true; 
79. this.onOpen = false; 
80. this.$STOP(); 
81. this.onEnterFrame = this.close; 
82. this.$PLAY();  
83. } 
84. }  
85. }, 
86. close:function (){ 
87. this.tit.innerHTML = "+"; 
88. var _r = parseInt(this.box.style.right); 
89. var _b = (-this.Maxw - _r)/5; 
90. this.box.style.right = Math.round(_r + _b) +"px"; 
91. this.kong.style.top = (document.documentElement.scrollTop + this.boxTop) +"px"; 
92. } 
93. }; 
94. window.onload = function (){ 
95. setTimeout(function(){new CLS.Marquee("tit","abc",10)},3000); 
96. //tit是点击按钮的Id ，abc是浮动块的ID,10是显示时长 
97. }; 
98. </script> 
99. <style type="text/css"> 
100. <!-- 
101. #abc { 
102. border: 1px solid #003399; 
103. position: absolute; 
104. height: 150px; 
105. width: 220px; 
106. right: -100%; 
107. } 
108. #abc #tit { 
109. background-color: #0066FF; 
110. position: relative; 
111. height: 100%; 
112. width: 20px; 
113. color: #FFFFFF; 
114. text-align: center; 
115. float: left; 
116. } 
117. #kong { 
118. position: absolute; 
119. width: 100%; 
120. top: 100px; 
121. overflow: hidden; 
122. top: 100px; 
123. right: 0px; 
124. } 
125. .right { 
126. float: right; 
127. width: 190px; 
128. padding: 5px; 
129. } 
130. --> 
131. </style> 
132. </head> 
133. <body style="margin:0px;"> 
134. <!--浮动框外面套一层，防止出现横向滚动条--> 
135. <div id="kong"> 
136. <!--浮动框--> 
137. <div id="abc"> 
138. <div id="tit">-</div> 
139. <div class="right"> 
140. <a href="/">网页上从右边缓缓弹出的广告框效果</a></div> 
141. </div> 
142. </div> 
143. 右侧广告3秒后弹出 
144. </body> 
145. </html> 

希望本文所述对大家的javascript程序设计有所帮助。