JS实现跑马灯效果(向左,向上)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
<title>JS实现跑马灯效果</title>
<style>
* {
    font-size:12px;
    font-family:宋体, Arial;
} /*规定了所有的字体样式*/
body {
    overflow:auto;
}
#mq {
    width:220px;
    height:40px;
    line-height:20px;
    overflow:hidden;
    border:1px solid black;
}
#mq div {
    position:absolute;
    width:220px;
    padding:0px 10px;
}
</style>
<script>
function init(){
    initMq($("mq"));
    $("mq").start();
}
   
function initMq(obj){
    var objs;
    //定义跑马灯对象的自定义属性
    obj.currentItem = -1;
    obj.loopDelay = 50;
    obj.loopItems = new Array();
    obj.loopTimer = null;
    obj.speedX = 2;
    obj.speedY = 2;
    //定义跑马灯对象的自定义方法
    obj.loop = mq_loop;
    obj.start = mq_startLoop;
    obj.stop = mq_stopLoop;
    //定义跑马灯对象的事件
    obj.onmouseover = function(){ this.stop(); }
    obj.onmouseout = function(){ this.loop(); }
      
    //获取跑马灯对象的所有子元素
    objs = obj.getElementsByTagName("div");
    for(var i=0; i<objs.length; i++){
        //在loopItems属性中记录子元素
        obj.loopItems.push(objs[i]);
        //自定义子元素的属性和方法
        objs[i].index = i;
        objs[i].move = move;
        objs[i].reset = mq_reset;
        //初始化子元素的状态
        objs[i].reset();
    }
}
   
function move(x, y){
    this.style.left = x + "px";
    this.style.top = y + "px";
}
   
function mq_loop(){
    var obj;
    clearTimeout(this.loopTimer);
    if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
    obj = this.loopItems[this.currentItem];
    if(obj.offsetLeft!=this.offsetLeft){
        //向左卷动
        obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
    }else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){
        //向上卷动
        obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
    }else{
        //重置该子元素
        obj.reset();
        this.currentItem++;
    }
    this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
}
   
function mq_reset(){
    var p = this.parentNode;
    this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
}
   
function mq_startLoop(){
    for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
    this.currentItem = 0;
    this.loop();
}
   
function mq_stopLoop(){
    clearTimeout(this.loopTimer);
}
   
function $(str){ return(document.getElementById(str)); }
window.onload = init;
</script>
</head>
<body>
<div id="mq">
  <div> js实现的跑马灯效果11111 </div>
  <div> js实现的跑马灯效果22222 </div>
</div>
</body>
</html>

  转自:http://yuncode.net/code/c_50796e1da2e7863

posted @   lanyan  阅读(5140)  评论(0编辑  收藏  举报
编辑推荐:
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)
点击右上角即可分享
微信分享提示