Ø  前言

今天在做商城首页时,遇到一个上下跑马灯功能,因为之前也只是接触过左右的跑马灯,一时还不知道从何下手。在网上看了几个 demo,并亲自运行了一下,是可以实现的。但是,能运行不知其所以然也不行,所以还需要自己编码去真正的理解,下面是我的示例。

1.   首先定义 css 样式

#div1{

width: 180px;

margin: auto;

border: 1px solid blue;

overflow: hidden;   /*必须设置该属性*/

}

.child{

width: 100%;

height: 100%;

text-align: center;

line-height: 30px;

}

2.   Js 代码

var div1;           //外层div

var height = 30;    //外层div高度

var rollIndex = 0;  //当前滚动的索引

var millisec = 2000;    //滚动间隔时间(毫秒)

var intervalIds = new Array();  //计时器 id 数组

var datas = ["上下滚动跑马灯1", "上下滚动跑马灯2", "上下滚动跑马灯3"];

window.onload = function() {

div1 = document.getElementById("div1");

div1.style.height = height + "px";

//鼠标进入停止滚动

div1.onmouseover = function() {

clearInterval(intervalIds[0]);

}

//鼠标离开开始滚动

div1.onmouseout = function() {

intervalIds[0] = setInterval("addItem()", millisec);

}

addItem();  //首先加载第一项

intervalIds[0] = setInterval("addItem()", millisec);

}

//添加滚动项

function addItem(){

var content = datas[rollIndex];

console.log("滚动item: " + rollIndex)

if(div1.childNodes.length <= 1) {

var div = document.createElement("div");

div.setAttribute("class", "child");

div.innerHTML = content;

div1.appendChild(div);

//设置两个 div 的背景色

if(rollIndex % 2 == 0)

div.style.background = "#EEE9E9";

else

div.style.background = "#F0FFF0";

}

else {

div1.childNodes[0].innerHTML = content;

div1.appendChild(div1.childNodes[0]);

div1.scrollTop = 0; //兼容Firefox

}

rollIndex++;

rollIndex = rollIndex < datas.length ? rollIndex : 0;

if(div1.childNodes.length > 1) {

clearInterval(intervalIds[1]);

intervalIds[1] = setInterval("setScroll()", 20);

}

}

//设置外层div.scrollTop

function setScroll(){

div1.scrollTop++;

if(div1.scrollTop >= height) {

clearInterval(intervalIds[1]);

console.log("stop");

}

}

3.   Html 代码

<div id="div1"></div>

4.   运行效果

Ø  总结

看代码其实并不难,但是当时我还真没看明白是如何实现滚动的。

其实是这样:

1.   首先加如一个div。

2.   然后再追加一个div,此时开始滚动(第一个div慢慢从上面移除,第二个div就随着从下面浮现出来)。

3.   第三次进入,就不再追加div了,只是将第一个的内容(也就是innerHTML)改变成新的内容,然后再将这个div重新追加(其实是调换了位置(这点很重要))到下面,然后再次滚动就看到了新的内容的div了,最后就这样反复循环。

使用 JS 实现文字上下跑马灯的更多相关文章

  1. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

  2. 使用 JS 实现图片左右跑马灯

    Ø  前言 之前写了一篇使用 JS 实现文字上下跑马灯,现在乘热打铁在把图片左右跑马灯一起贴出来,不多说直接看代码. 1.   首先定义 css 样式 <style type="tex ...

  3. CSS文字的跑马灯特效

    上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心! 今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春! 道具:会敲代码的巧手.七窍玲珑心.会 ...

  4. Unity3D 文字滚动跑马灯效果

    需求 在日常游戏中,文字滚动效果是比较常用的.例如日常游戏顶部的新闻公告,聊天系统的文字滚动,都属于这个范围. 思路 由于使用的地方比较广泛,所以希望能够尽量独立的游戏之外,能够做到随处使用的功能.N ...

  5. JS写一个列表跑马灯效果--基于touchslide.js

    先放上效果图: 类似于这样的,在列表中循环添加背景样式的跑马灯效果. 准备引入JS插件: <script type="text/javascript" src="x ...

  6. jquery.marquee.js - 有点奇怪的跑马灯动画,不过还是加上去了

    客户想要一个跑马灯的效果,最终我用了jquery.marquee.js. 这个库很简单就能用. 效果是这样,从左到右,移动速度都不一样. 1. HTML <div class="mar ...

  7. JavaScript实现文字跑马灯

    其实实现文字的跑马灯和实现图片轮播的原理是一样的. 下面是我自己实现的,文字的位置可以随便更改,效果不会变,文字的内容可以通过ajax获取,同时,可以直接用Jquery改写一下,很方便. <!D ...

  8. android使用TextView实现跑马灯的效果(1)

    android使用TextView实现跑马灯的效果 1.activity_main.xml <?xml version="1.0" encoding="utf-8& ...

  9. android实现跑马灯效果

    第一步:新建一个新项目,MarqueeTextView 首先为了观察到跑马灯效果,将要显示的文字极可能 写长.在strings.xml目录里面将 <string name="hello ...

随机推荐

  1. pandas to_excel

    报错:IllegalCharacterError 其原因是字段中包含了unicode字符. 解决方案: # 首先,安装python包xlsxwriter pip install xlsxwriter ...

  2. 分布式监控系统Zabbix--使用Grafana进行图形展示

      今天介绍一款高颜值监控绘图工具Grafana,在使用Zabbix监控环境中,通常我们会结合Grafana进行图形展示.Grafana默认没有zabbix作为数据源,需要手动给zabbix安装一个插 ...

  3. PMP项目管理的49个过程,一张图让你全部了解

    项目管理的49个过程,看表格显得比较单调,印象也不是很深,所以今天小编就给大家发一张图片,可以用一张图就能生动又详细的了解PMP项目管理的49个过程.   大家看完是不是觉得一目了然了呢,图片上传后不 ...

  4. linux系统调用之用户管理

    getuid 获取用户标识号 setuid 设置用户标志号 getgid 获取组标识号 setgid 设置组标志号 getegid 获取有效组标识号 setegid 设置有效组标识号 geteuid ...

  5. python 类的介绍实例

    使用面向对象的优点: 1.能够更好的设计软件架构 2.维护软件模块 3.易于架构和组件的重用 类的定义: 构造函数:初始化用,写不写都可以,默认为空 类属性:属于类的对象 方法属性:不属于类的对象 私 ...

  6. pageObject学习

    1.java代码层面的pageObject实现 参考:https://www.cnblogs.com/yytesting/p/6973474.html 是用java写的实例,优点是结构很清晰,缺点是p ...

  7. go操作redis和mysql示例

    一:redis示例 使用redis的包是: github.com/garyburd/redigo/redis 1:编写第一个示例: 链接,设置,获取 redis_basic.go package ma ...

  8. sys用户的操作

    oracle中查找某个表属于哪个用户? select owner from dba_tables where table_name=upper('t_l_tradelist' )          1 ...

  9. 一个关于finally和return的面试题

    public class Test{ public int add(int a,int b){ try { return a+b; } catch (Exception e) { System.out ...

  10. 「Python」6种python中执行shell命令方法

    用Python调用Shell命令有如下几种方式: 第一种: os.system("The command you want"). 这个调用相当直接,且是同步进行的,程序需要阻塞并等 ...