html实现滚动播报（原生JS实现）
废话不多说，先看一个简单的滚动效果（鼠标放上去的时候可以暂停滚动，谷歌版本 66.0.3359.139（正式版本）查看时会出现滚动混乱。单独提出来的时候不会，应该是谷歌和博客园的某些不兼容优化造成的）：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
var oMarquee; //播报的容器
var BBLineH = 26; //单行高度，像素
var BBScrollAmount = 1; //每次滚动高度，像素
var BBLineCount = 6; //当前这批数据 实际行数
var rollRestTime = 2500; //一条新播报滚动完成后，距离下一次滚动的间隔时间 单位ms
var rollTime = 10; //播报滚动中的刷新时间 单位ms /*
* 启动播报滚动事件
*/
window.onload= function(){
BBAllTime = 0;
oMarquee = document.getElementById("bobaodiv"); //滚动对象
window.setTimeout( "run()", rollRestTime );
} /*
* 播报滚动事件主逻辑
*/
function run() {
if(BBScrollAmount == 0){//若单次滚动的距离为0，则开始下一次监听，不计数
window.setTimeout( "run()", rollTime );
return;
}
if ( oMarquee.scrollTop >= BBLineCount * BBLineH ) {//滚动完一次数据后，复位
oMarquee.scrollTop = 0;
}
oMarquee.scrollTop += BBScrollAmount;
if ( oMarquee.scrollTop % BBLineH < 1 && oMarquee.scrollTop > 0 ) {
window.setTimeout( "run()", rollRestTime );
} else {
window.setTimeout( "run()", rollTime );
}
}
</script>
</head>
<body >
<div id="bobaodiv" style="overflow: hidden; height: 100px; width: 160px; border: 4px solid blue;" onmouseover="BBScrollAmount=0" onmouseout="BBScrollAmount=1">
<div style="border: 1px solid black; height: 24px; text-align: center;">第一个子DIV</div>
<div style="border: 1px solid black; height: 24px; text-align: center;">第二个子DIV</div>
<div style="border: 1px solid black; height: 24px; text-align: center;">第三个子DIV</div>
<div style="border: 1px solid black; height: 24px; text-align: center;">第四个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第五个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第六个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第一个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第二个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第三个子DIV</div>
<div style="text-align: center; border: 1px solid black; height: 24px;">第四个子DIV</div>
</div>
</body>
</html>
接下来文章会分两个阶段来详细介绍滚动播报。第一阶段介绍简单的实现方式，可以帮助大家了解滚动实现的基本原理，第二阶段提供了适用性高的demo及api讲解，可以直接引入项目。
第一阶段
一.js属性介绍
| 编号 | 属性名 | 备注 |
|---|---|---|
| 1 | oMarquee | 播报展示的容器dom |
| 2 | BBLineH | 播报中每行的高度，必须精确，因为每滚动完一条数据时，需要停留一段时间，再进行下一次滚动 |
| 3 | BBScrollAmount | 每次页面刷新，滚动的距离 |
| 4 | BBLineCount | 当前一共有多少条有效数据，用于判断什么时候可以让滚动位置归零 |
| 5 | rollRestTime | 一条数据滚动完以后，停留的时间 |
| 6 | rollTime | 滚动时刷新页面的间隔时间 |
滚动的动作是由scrollTop属性实现的。该属性可以设置标签内部的 子标签头部 被隐藏的高度，进而实现上下滚动的效果。当然也可以使用scrollLeft实现左右滚动。
二.js方法介绍
滚动的操作是由一个定时的递归函数实现的。该函数通过【rollTime】 属性来判断在滚动期间，多久刷新一次滚动窗口，通过【BBScrollAmount】属性来判断在滚动期间，每次刷新窗口滚动的距离。通过【BBLineH】属性来判断什么时候完成一行数据的滚动。通过【rollRestTime】属性来判断完成一行数据的滚动后，需要休息多久再进行下一行的滚动。最后还需要【BBLineCount】属性，用来判断什么时候对滚动位置进行归零，实现首尾循环连续滚动的效果。
三.html介绍
html中主要有两点需要注意的。1：展示的内容，需要在尾部加上几行首部的内容，因为js需要将最后一行数据滚动到隐藏后，才会进行滚动位置归零。而如果滚动内容只记载到最后一行数据的话，根据scrollTop的特性，就永远也隐藏不了最后一行内容了，进而就会不能归零，滚动停止。2： onmouseover="BBScrollAmount=0" onmouseout="BBScrollAmount=1 可以控制当鼠标移动到滚动窗口时，滚动停止的效果。
第二阶段
先贴个demo，打个游戏，30号再更。demo下载
html实现滚动播报（原生JS实现）的更多相关文章
- 无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动
这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下. html+css部分: <style> #moocb ...
- 列表内容自动向上滚动（原生JS）
效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等
在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...
- 原生JS—实现图片循环切换及监测鼠标滚动切换图片
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们 ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- 原生JS实现banner图的滚动与跳转
HTML部分: <div id="banner"> <!--4张滚动的图片--> <div id="inside"> < ...
- 利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...
- 原生js实现单屏滚动
类似于fullpage的单屏滚动,使用原生JS实现,不依赖任何js库: css: html,body {height:100%;} body {margin:0px;} div {height:100 ...
随机推荐
- nginx根据CPU配置多线程运行
转自:Nginx使用教程(二):Nginx配置性能优化之worker配置 配置Nginx workers <br\>NGINX根据指定的配置运行固定数量的工作进程. 这些工作进程负责处理所 ...
- Python数据分析Pandas库方法简介
Pandas 入门 Pandas简介 背景:pandas是一个Python包,提供快速,灵活和富有表现力的数据结构,旨在使“关系”或“标记”数据的使用既简单又直观.它旨在成为在Python中进行实际, ...
- 机器学习【三】k-近邻(kNN)算法
一.kNN算法概述 kNN算法是用来分类的,其依据测量不同特征值之间的距离,其核心思想在于用距离目标最近的k个样本数据的分类来代表目标的分类(这k个样本数据和目标数据最为相似).其精度高,对异常值不敏 ...
- Python RabbitMQ消息分发轮询
1.收消息:一对多,默认依次轮询的发给每个消费端. 2.消息确认:默认RabbitMQ不会设置no_ack=Ture,意思是,当生产者给消费者发送发送消息时,消费者处理这个消息,处理完后会手动确认发送 ...
- centos7救援模式--rescue模式
前序 经典问题:系统无法进入,如grub损坏或某个配置文件改错 操作 1 按方向键到Boot,选到Hard Driver,按减号,使其下移,最终让CD-ROM Drive到第一行,并按F10保存 2 ...
- opencv学习之路（19）、直方图
一.概述 二.一维灰度直方图 #include "opencv2/opencv.hpp" #include<iostream> using namespace cv; ...
- Python3 tkinter基础 Radiobutton indicatoron 长条形 pack 充满一行
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- P3829 [SHOI2012]信用卡凸包
思路 注意到结果就是每个信用卡边上的四个圆心的凸包周长+一个圆的周长 然后就好做了 注意平行时把距离小的排在前面,栈中至少要有1个元素(top>1),凸包中如果存在叉积为0的点也要pop,否则可 ...
- 论文笔记：Real-Time MDNet
Real-Time MDNet ECCV 2018 2018-10-22 15:52:01 Paper:http://openaccess.thecvf.com/content_ECCV_2018/ ...
- Java内存可见性
如果一个线程对共享变量的修改,能够被其它线程看到,那么就能说明共享变量在线程之间是可见的.如果一个变量在多个线程的工作内存中都存在副本,那么这个变量就是这几个线程的共享变量.Java内存模型(Java ...