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;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>