<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. TP5之验证码

    处于安全的角度,我们一般都会使用tp5自带的验证码 直接上图,干就完了

  2. css div平移淡入淡出

    <!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; backg ...

  3. 在OpenCV for Android 2.4.5中使用SURF(nonfree module)

    http://blog.csdn.net/ruifdu/article/details/9120559 在OpenCV4Android中没有nonfree module,因此也就没有了SURF和SIF ...

  4. jzoj5983. 【北大2019冬令营模拟2019.1.1】多边形 （组合数学）

    这其实是道打表题--你看我代码就知道了-- 咳咳来点严谨证明好了-- 前方高能请注意 首先,正多边形近似于圆,可以看做在圆里内接多边形.圆内接多边形最多只有三个锐角.因为凸多边形的外角和为\(360\ ...

  5. perl 操作文件指针

    之前使用perl 脚本写了一个读取文件的小工具,但是由于当时使用的Tie 的方式,在处理大文件时,效率并不十分理想,所以在网上搜索了perl 如何操作文件指针的文章,自己也学习一下,本博客就是学习过程 ...

  6. ssh 下载文件以及上传文件到服务器

    https://blog.csdn.net/jackghq/article/details/64124062 scp john@192.168.1.100:~/Desktop/MHN_error_so ...

  7. 浅谈H5技术

    1.什么是H5:HTML5将成为HTML.XHTML以及HTML  DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...

  8. Qt 2D绘图之三：绘制文字、路径、图像、复合模式

    一.绘制文字 除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::font ...

  9. G-华华对月月的忠诚

    链接:https://ac.nowcoder.com/acm/contest/392/G 题意: 月月要参加学校的信息学集训,晚上不能陪华华聊天了.不过为了防止华华去和别的小姐姐聊天,浪费时间影响学习 ...

  10. 1-26HashSet简介

    Set的特点 Set里面存储的元素不能重复,没有索引,存取顺序不一致. package com.monkey1024.set; import java.util.HashSet; /** * Set的 ...