JavaScript实现图片DIV竖向滑动的方法

这篇文章主要介绍了JavaScript实现图片DIV竖向滑动的方法,涉及javascript操作div层的相关技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现图片DIV竖向滑动的方法。分享给大家供大家参考。具体实现方法如下：

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"><head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
5. <title>图片滑动展示效果</title> 
6. <script type="text/javascript"> 
7. var $ = function (id) { 
8. return "string" == typeof id ? document.getElementById(id) : id; 
9. }; 
10. function Event(e){ 
11. var oEvent = document.all ? window.event : e; 
12. if (document.all) { 
13. if(oEvent.type == "mouseout") { 
14. oEvent.relatedTarget = oEvent.toElement; 
15. }else if(oEvent.type == "mouseover") { 
16. oEvent.relatedTarget = oEvent.fromElement; 
17. } 
18. } 
19. return oEvent; 
20. } 
21. function addEventHandler(oTarget, sEventType, fnHandler) { 
22. if (oTarget.addEventListener) { 
23. oTarget.addEventListener(sEventType, fnHandler, false); 
24. } else if (oTarget.attachEvent) { 
25. oTarget.attachEvent("on" + sEventType, fnHandler); 
26. } else { 
27. oTarget["on" + sEventType] = fnHandler; 
28. } 
29. }; 
30. var Class = { 
31. create: function() { 
32. return function() { 
33. this.initialize.apply(this, arguments); 
34. } 
35. } 
36. } 
37. Object.extend = function(destination, source) { 
38. for (var property in source) { 
39. destination[property] = source[property]; 
40. } 
41. return destination; 
42. } 
43.  
44.  
45. var GlideView = Class.create(); 
46. GlideView.prototype = { 
47. //容器对象 容器宽度 展示标签 展示宽度 
48. initialize: function(obj, iHeight, sTag, iMaxHeight, options) { 
49. var oContainer = $(obj), oThis=this, len = 0; 
50. this.SetOptions(options); 
51. this.Step = Math.abs(this.options.Step); 
52. this.Time = Math.abs(this.options.Time); 
53. this._list = oContainer.getElementsByTagName(sTag); 
54. len = this._list.length; 
55. this._count = len; 
56. this._height = parseInt(iHeight / len); 
57. this._height_max = parseInt(iMaxHeight); 
58. this._height_min = parseInt((iHeight - this._height_max) / (len - 1)); 
59. this._timer = null; 
60. this.Each(function(oList, oText, i){ 
61. oList._target = this._height * i;//自定义一个属性放目标left 
62. oList.style.top = oList._target + "px"; 
63. oList.style.position = "absolute"; 
64. addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); }); 
65. }) 
66. //容器样式设置 
67. oContainer.style.height = iHeight + "px"; 
68. oContainer.style.overflow = "hidden"; 
69. oContainer.style.position = "relative"; 
70. //移出容器时返回默认状态 
71. addEventHandler(oContainer, "mouseout", function(e){ 
72. //变通防止执行oList的mouseout 
73. var o = Event(e).relatedTarget; 
74. if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1); 
75. }) 
76. }, 
77. //设置默认属性 
78. SetOptions: function(options) { 
79. this.options = {//默认值 
80. Step:20,//滑动变化率 
81. Time:3,//滑动延时 
82. TextTag:"",//说明容器tag 
83. TextHeight: 0//说明容器高度 
84. }; 
85. Object.extend(this.options, options || {}); 
86. }, 
87. //相关设置 
88. Set: function(index) { 
89. if (index < 0) { 
90. //鼠标移出容器返回默认状态 
91. this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } }) 
92. } else { 
93. //鼠标移到某个滑动对象上 
94. this.Each(function(oList, oText, i){ 
95. oList._target = (i <= index) ? this._height_min * i : this._height_min * (i - 1) + this._height_max; 
96. if(oText){ oText._target = (i == index) ? 0 : this._height_text; } 
97. }) 
98. } 
99. this.Move(); 
100. }, 
101. //移动 
102. Move: function() { 
103. clearTimeout(this._timer); 
104. var bFinish = true;//是否全部到达目标地址 
105. this.Each(function(oList, oText, i){ 
106. var iNow = parseInt(oList.style.top), iStep = this.GetStep(oList._target, iNow); 
107. if (iStep != 0) { bFinish = false; oList.style.top = (iNow + iStep) + "px"; } 
108. }) 
109. //未到达目标继续移动 
110. if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); } 
111. }, 
112. //获取步长 
113. GetStep: function(iTarget, iNow) { 
114. var iStep = (iTarget - iNow) / this.Step; 
115. if (iStep == 0) return 0; 
116. if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1); 
117. return iStep; 
118. }, 
119. Each:function(fun) { 
120. for (var i = 0; i < this._count; i++) 
121. fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i); 
122. } 
123. }; 
124. </script> 
125. <style type="text/css"> 
126. #idGlideView { 
127. height:314px; 
128. width:325px; 
129. margin:0 auto; 
130. } 
131. #idGlideView div { 
132. width:325px; 
133. height:314px; 
134. } 
135. </style> 
136. </head> 
137. <body> 
138. <div id="idGlideView"> 
139. <div style="background-color:#006699;"> 鼠标移到这里试试看！</div> 
140. <div style="background-color:#FF9933;"> 鼠标移到这里试试看！</div> 
141. </div> 
142. <div>http://www.vevb.com/</div> 
143. <SCRIPT> 
144. var gv = new GlideView("idGlideView", 314, "div", 280,""); 
145. </SCRIPT> 
146. </body> 
147. </html> 

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