01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>无标题文档</title>
06.<script type="text/javascript">
07. window.onload = function(){
08. var m = new XX.Fx.Marquee(document.getElementById('demo'), {direction:'top', speed:80, step:1});
09. m.start();
10. myStop = function(){
11. m.stop();
12. };
13.
14. myStart = function(){
15. m.start();
16. }
17. };
18.window.XX = window.XX || {};
19.XX.Fx = XX.Fx || {};
20./*
21.走马灯构造函数；
22.参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果
23.opts:JSON格式的数据，可传入的参数包括:
24. {
25. speed //滚动速度，以毫秒为单位，默认为1000
26. step //滚动像素， 默认为5
27. direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'
28. }
29.*/
30.
31./* XX.Fx.Marquee实现动画的函数 */
32.XX.Fx.Marquee = function(elem, opts){
33. opts = opts || {}; //为设定滚动的方向变量
34. this.el = elem;
35. this.speed = opts.speed || 1000; //滚动的速度为1秒滚动一次
36. this.step = opts.step || 5; //滚动像素设置为5
37. var dir = this.direction = opts.direction || 'left'; //滚动的方向设置
38.
39. if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {
40. throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');
41. }
42.
43. /*elem表示封装的滚定元素*/
44.
45. elem.style.overflow = 'hidden';
46. elem.style.whiteSpace = 'nowrap';
47. if(dir === 'right' || dir === 'bottom'){
48. this.step = - this.step ;
49. }
50. this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';
51. this.size = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);
52. this.el.innerHTML += this.el.innerHTML;
53.};
54.
55.XX.Fx.Marquee.prototype.start = function(){
56.
57. if(this.timer) {
58. clearTimeout(this.timer);
59. }
60.
61. var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;
62. switch (this.direction){
63. case 'right':
64. case 'bottom':
65. move = function(){
66. if(el[offset] > 0){
67. el[offset] += step;
68.
69. } else{
70. el[offset] = that.size;
71.
72. }
73. };
74. break;
75. default:
76. move = function(){
77. if(el[offset] < size){
78. el[offset] += step;
79.
80. } else{
81. el[offset] = 0;
82.
83. }
84. };
85. }
86.
87. this.timer = setInterval(move, speed);
88.};
89.
90.
91.XX.Fx.Marquee.prototype.stop = function(){
92. clearInterval(this.timer);
93.};
94.
95.</script>
96.</head>
97.
98.<body>
99.<hr color="#ff0000" />
100. <div id="demo" style="border:1 solid #c0c0c0;text-align:left;width:954px;height:200px" onmouseover="myStop();" onmouseout="myStart();">
101.<h2>--------------------走马灯演示测试--------------------------</h2><br />
102.文字滚动测试1<br />
103.文字滚动测试2<br />
104.文字滚动测试3<br />
105.<br />
106.制作者：Exodia<br />
107.联系方式:QQ39942816<br />
108.<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>
109.</div>
110.</body>
111.</html>
