<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

JS实现跑马灯效果(向左，向上)的更多相关文章

  1. JS实现跑马灯效果(鼠标滑入可暂停，离开继续跑)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. js代码跑马灯效果-----轮播图字效果！

    文字元素: <p id="yc-msg">你有本事来打我呀!</p> js执行代码: function ycMsg() { // 获取 标签 var pOb ...

  3. js图片跑马灯效果

    <style. type="text/css">body{margin:0px auto; padding:0px;}ul,li{margin:0px; padding ...

  4. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  5. 微信小程序跑马灯效果--基于CSS3 animation 及 基于JS

    如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 基于CSS3主要代码实现 效果图: 视图模板wxml中: <view class=&qu ...

  6. 原生js实现跑马灯抽奖效果

    目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</ti ...

  7. js实现横向跑马灯效果

    首先我们需要一个html代码的框架如下: <div style="position: absolute; top: 0px; left: 168px; width: 100%; mar ...

  8. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  9. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

随机推荐

  1. E20181029-hm

    cardinality 基数 entity n. 实体; 实际存在物; 本质; distribute vt. 分配,散布; 散发,分发; 把…分类; [电] 配电; replica  n. 复制品; ...

  2. SourceTree切换语言

    点击ok,重启SourceTree即生效 over!over!over!

  3. TextBox禁用与启用的方法

    $('#text1').textbox('enable');// 启用 $('#text1').textbox('disable');// 禁用 注:以上方法也适用于datebox等等

  4. laravel SQL语句

    DB::table('表名')->get();   //查询表里的所有数据 DB::table('表名')->where()->find(需要查询的条数);    查询单或多条数据 ...

  5. Pro Android学习笔记（一五四）：传感器（4）：陀螺仪、加速传感器

    文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处http://blog.csdn.net/flowingflying/以及作者@恺风Wei. 陀螺仪 陀螺仪(Gyr ...

  6. Unity3D–Texture图片空间和内存占用分析

    Texture图片空间和内存占用分析.由于U3D并没有很好的诠释对于图片的处理方式,所以很多人一直对于图集的大小和内存的占用情况都不了解.在此对于U3D的图片问题做一个实际数据的分析.此前的项目都会存 ...

  7. 怎么解决UIScrollView把uitableviewcell的点击事件屏蔽了

    [self.contentView addSubview:self.scrollView]; self.scrollView.userInteractionEnabled = NO; [self.co ...

  8. tpc-ds99 工具使用

    安装部署 tpc-ds-99 工具 解压文件 unzip tpc-ds-tool.zip 进入目录 cd v2.3.0/tools 拷贝Makefile文件 cp Makefile.suite Mak ...

  9. 【bzoj1731】Layout 排队布局

    1731: [Usaco2005 dec]Layout 排队布局 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 868  Solved: 495[Subm ...

  10. Codeforces Round #533(Div. 2) C.Ayoub and Lost Array

    链接:https://codeforces.com/contest/1105/problem/C 题意: 给n,l,r. 一个n长的数组每个位置可以填区间l-r的值. 有多少种填法,使得数组每个位置相 ...