<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. YUV格式学习：YUV420P、YV12、NV12、NV21格式转换成RGB24（转载）

    转自:http://www.latelee.org/my-study/yuv-learning-yuv420p-to-rgb24.html 对于YUV420的格式,网上有一大堆资料,这里就不说了.直奔 ...

  2. VS Supercharger插件

    一.前言 Supercharger 是 VS 的一款插件,针对代码进行优化和着色,便于观察和区分. 二.下载及安装 下载的 URL 如下:Supercharger 下载地址 点击下载,下载完成以后,那 ...

  3. 简单安装与使用composer

    1.下载composer.exe工具,然后进行安装 这一步需要找到你使用的php版本文件 2.windows+r     cmd  输入composer 安装中国镜像,提高使用效率 https://p ...

  4. 兼容主流浏览器的渐变颜色背景gradient的写法

    /* Webkit: Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff66 ...

  5. Codeforces 67A【模拟】

    题意: 给一个字符串代表相邻学生的比较,L代表左边多,R表示右边多,=表示左右相等. 保证每个人拿糖>=1,在分糖最少的情况下,输出每个学生所分得的糖. 思路: 模拟一下,第一个人一开始拿1个, ...

  6. lightoj 1088【树状数组+离散化】

    题意: 给你n个数,然后给你q个区间,然后问你这n个数有多少个在这个区间上: 思路: 树状数组搞搞,但是注意到数的范围很大,所以先离散化一下. 初始化初始化!!!卧槽,wa的我好郁闷... #incl ...

  7. HDU2489【状压枚举】

    题意: 给你n个点的图,然后让你在图里挑m个点,达到sumedge/sumnode最小 思路: 由于数据范围小,状压枚举符合m个点的状态,我是用vactor存了结点位置,也记录了结点的sum值,然后跑 ...

  8. 洛谷P4151 [WC2011]最大XOR和路径（线性基）

    传送门 不知道线性基是什么东西的可以看看蒟蒻的总结 首先看到异或就想到线性基 我们考虑有一条路径,那么从这条路径走到图中的任意一个环再走回这条路径上,对答案的贡献是这个环的异或和,走到这个环上的路径对 ...

  9. IT兄弟连 JavaWeb教程 JSP与Servlet的联系

    Servlet是使用Java Servlet接口(API)运行在Web服务器上的Java程序,其功能十分强大,它不但可以处理HTTP请求中的业务逻辑,而且还可以输出HTML代码来显示指定页面,而JSP ...

  10. UML建模 | Rose | 没有跳出可选择新建RUP的对话框解决方法