001 <html>
002 <head>
003 <title>JS实现跑马灯效果</title>
004 <style>
005 * {
006 font-size:12px;
007 font-family:宋体, Arial;
008 } /*规定了所有的字体样式*/
009 body {
010 overflow:auto;
011 }
012 #mq {
013 width:220px;
014 height:40px;
015 line-height:20px;
016 overflow:hidden;
017 border:1px solid black;
018 }
019 #mq div {
020 position:absolute;
021 width:220px;
022 padding:0px 10px;
023 }
024 </style>
025 <script>
026 function init(){
027 initMq($("mq"));
028 $("mq").start();
029 }
030
031 function initMq(obj){
032 var objs;
033 //定义跑马灯对象的自定义属性
034 obj.currentItem = -1;
035 obj.loopDelay = 50;
036 obj.loopItems = new Array();
037 obj.loopTimer = null;
038 obj.speedX = 2;
039 obj.speedY = 2;
040 //定义跑马灯对象的自定义方法
041 obj.loop = mq_loop;
042 obj.start = mq_startLoop;
043 obj.stop = mq_stopLoop;
044 //定义跑马灯对象的事件
045 obj.onmouseover = function(){ this.stop(); }
046 obj.onmouseout = function(){ this.loop(); }
047
048 //获取跑马灯对象的所有子元素
049 objs = obj.getElementsByTagName("div");
050 for(var i=0; i<objs.length; i++){
051 //在loopItems属性中记录子元素
052 obj.loopItems.push(objs[i]);
053 //自定义子元素的属性和方法
054 objs[i].index = i;
055 objs[i].move = move;
056 objs[i].reset = mq_reset;
057 //初始化子元素的状态
058 objs[i].reset();
059 }
060 }
061
062 function move(x, y){
063 this.style.left = x + "px";
064 this.style.top = y + "px";
065 }
066
067 function mq_loop(){
068 var obj;
069 clearTimeout(this.loopTimer);
070 if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
071 obj = this.loopItems[this.currentItem];
072 if(obj.offsetLeft!=this.offsetLeft){
073 //向左卷动
074 obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
075 }else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){
076 //向上卷动
077 obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
078 }else{
079 //重置该子元素
080 obj.reset();
081 this.currentItem++;
082 }
083 this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
084 }
085
086 function mq_reset(){
087 var p = this.parentNode;
088 this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
089 }
090
091 function mq_startLoop(){
092 for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
093 this.currentItem = 0;
094 this.loop();
095 }
096
097 function mq_stopLoop(){
098 clearTimeout(this.loopTimer);
099 }
100
101 function $(str){ return(document.getElementById(str)); }
102 window.onload = init;
103 </script>
104 </head>
105 <body>
106 <div id="mq">
107 <div> js实现的跑马灯效果11111 </div>
108 <div> js实现的跑马灯效果22222 </div>
109 </div>
110 </body>
111 </html>
完整源代码：http://yuncode.net/code/c_50796e1da2e7863
1358
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
