<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. react-redux升级到7.0.x后报错"TypeError: Object(...) is not a function"

    同样一套代码,react-redux 6.0.x 的版本下可以正常运行,在7.0.x的版本下出现报错,而且报错原因实在太难定位了 package.json { ... "react-redu ...

  2. 如何使Label有修改功能

    如何使Label有修改功能 之前制作一个项目时需要这样一个功能: 双击Label, 随后Label变为TextBox,用户修改后回车,TextBox变回Label 之前使用WPF做了一个,代码如下: ...

  3. Codevs 1570 去看电影

    1570 去看电影  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 农夫约翰带着他的一些奶牛去看 ...

  4. 【OpenJ_Bailian - 2795】金银岛(贪心)

    金银岛 Descriptions: 某天KID利用飞行器飞到了一个金银岛上,上面有许多珍贵的金属,KID虽然更喜欢各种宝石的艺术品,可是也不拒绝这样珍贵的金属.但是他只带着一个口袋,口袋至多只能装重量 ...

  5. PJzhang:最基本的正则表达式实例

    猫宁!!! 参考链接: https://www.cnblogs.com/fozero/p/7868687.html http://tool.oschina.net/regex/# http://too ...

  6. C#Sqlite增删改查

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

  7. 51Nod 1043 幸运号码

    #include <stdio.h> #include <algorithm> using namespace std; typedef long long ll; ; ][] ...

  8. 选择器 nth-child和 nth-of-type的区别

    <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li&g ...

  9. JS面向对象方法(二) 面向对象方法实现橱窗式图面预览以及放大功能

     效果图: HTML结构如下: <div id="preview"> <div id="mediumDiv"> <img id=& ...

  10. gin实现spring boot url拦截器

    1.定义中间件 func middle(c *gin.Context) { fmt.Println("我是中间件") c.Next() } 2.对要拦截的路由进行分组并引入中间件 ...