<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. 模型验证 IValidatableObject 无法进入 Validate 方法的原因

    模型的属性的类型为 decimal 时无法进入 Validate 方法 public decimal Age { get; set; } 当把属性的类型改为可空类型时 则可以进入 Validate 方 ...

  2. lightoj1062【几何（二分）】

    其实就应该想到,哪有那么简单让你直接搞出答案的几何题啊:(而且很有可能是二分? 题意: 有两个梯子,一个靠在左边墙上,一个靠在右边墙上,长度分别为 x 和 y,他们的交点距离地面高度是 c,求两个梯子 ...

  3. 洛谷P2824 [HEOI2016/TJOI2016]排序（线段树）

    传送门 这题的思路好清奇 因为只有一次查询,我们考虑二分这个值为多少 将原序列转化为一个$01$序列,如果原序列上的值大于$mid$则为$1$否则为$0$ 那么排序就可以用线段树优化,设该区间内$1$ ...

  4. 笔记-JavaWeb学习之旅6

    表格标签: table:定义表格 width :宽度 border:边框 cellpadding:定义内容和单元格的距离了 cellspacing:定义单元格之间的距离 bgcolor:背景色 tr: ...

  5. C#Sqlite增删改查

    说到使用数据库的话,无非也就是对数据的增加,删除和修改以及查询.前文已经 创建好了程序,现在我们就可以来具体实现Sqlite的数据操作,增删改查. 第一步,创建连接字符串来连接数据库: private ...

  6. Validation（1）

    站在巨人的肩膀上 Java Bean Validation 最佳实践 参数校验是我们程序开发中必不可少的过程.用户在前端页面上填写表单时,前端js程序会校验参数的合法性,当数据到了后端,为了防止恶意操 ...

  7. Hexo - CNAME文件在每次部署后就没了

    问题 一般我们会将Hexo博客搭建到Github上,如果在Github上为其配置一个自定义的域名时,会自动在项目仓库根目录下新添加一个CNAME文件.但是这里有个问题,如果将Hexo博客重新部署一遍后 ...

  8. 14.PTD与的基址

    0xC0300000就是页目录的基址. 随便找一个软件测试下 通过0xC0300000找到的物理页就是页目录表这个物理页即是页目录表本身也是页表页目录表是一张特殊的页表,每一项PTE指向的不是普通的物 ...

  9. 基于http的软件仓库

    这是企业中常用的方法 比如一台服务器准备好了,公司必然要安装一些应用 这时可以用这种方法批量安装应用 运行一条命令,服务器就会自己去连接软件仓库,去下载来安装. [root@webmaster htm ...

  10. 洛谷P3177||bzoj4033 [HAOI2015]树上染色

    洛谷P3177 bzoj4033 根本不会做... 上网查了题解,发现只要在状态定义的时候就考虑每一条边全局的贡献就好了? 考虑边的贡献和修改状态定义我都想到了,然而并不能想到要结合起来 ans[i] ...