<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. Bootstrap 自适应排列顺序

    一.前用 我们在做一些页面的设计时,总会想到自适应的问题.其实 Bootstrap 框架就很好的融合这个问题了.下面是我学习 Bootstrap 的总结. 二.问题来源 我为什么会遇见这个问题,是因为 ...

  2. HDU6006:Engineer Assignment(状压DP)

    传送门 题意 给出n个工程,m个工程师,每个工程和工程师需要/拥有若干个技能,询问能够完成的最大工程个数,每个工程师用一次 分析 dp[i][j]表示前i个工程用的工程师集合为j的最大工程个数,那么有 ...

  3. Codeforces 174B【模拟构造】

    题意: 给你一个串只有小写字母和点,让你构造前缀是1-8,后缀是1-3长度的文件名: 思路: 那么以"."作为分割点,把字符串都拿出来,然后 首段长度<=8 OK; 中间&l ...

  4. hadoop 2.5.1单机安装部署伪集群

    环境:ubuntu 14.04 server 64版本 hadoop 2.5.1 jdk 1.6 部署的步骤主要参考了http://blog.csdn.net/greensurfer/article/ ...

  5. github的上传本地文档

    自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...

  6. Java 时区（转）

    http://blog.csdn.net/wangpeng047/article/details/8560690

  7. RN初始化项目报错

    解决方法:全局删除yarn

  8. Windows类标识符及其妙用

    Windows类标识符 百度百科这样解释: Windows的类标识符class identifier也称为CLASSID或CLSID,是与某一个类对象相联系的唯一标记(UUID).一个准备创建多个对象 ...

  9. socketserver 入门练习

    个人理解: 个人感觉socketserver其实就是为服务端专门提供的一个用于解决多用户并发访问需求的一个模块 小试牛刀: 服务端socketserver_server.py import socke ...

  10. Zynq7000开发系列-6（QT开发环境搭建：Ubuntu、Zynq）

    操作系统:Ubuntu14.04.5 LTS 64bit Qt:Qt 5.4.2 (qt-opensource-linux-x64-5.4.2.run.qt-everywhere-opensource ...