使用JavaScript实现连续滚动字幕效果的方法


Posted in Javascript onJuly 07, 2015

我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。

下面为你介绍这是如何实现的。

为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。

<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>
<br> <a href="#">链接二</a>
<br> <a href="#">链接三</a>
<br> <a href="#">链接四</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="java-script">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer"
style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>

这样就完成了,感觉做起来也不难吧。

Javascript 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
你必须知道的Javascript知识点之"深入理解作用域链"的介绍
Apr 23 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
JavaScript实现简单的时钟实例代码
Nov 23 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
Jul 10 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
React Native预设占位placeholder的使用
Sep 28 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
理解JavaScript的变量的入门教程
Jul 07 #Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 #Javascript
javascript实现控制div颜色
Jul 07 #Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 #Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 #Javascript
javascript中数组方法汇总
Jul 07 #Javascript
jQuery原型属性和原型方法详解
Jul 07 #Javascript
You might like
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
Apache无法自动跳转却显示目录的解决方法
2020/11/30 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
PHP实现简单日历类编写
2020/08/28 PHP
js直接编辑当前cookie的脚本
2008/09/14 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
微信小程序页面生命周期详解
2018/01/31 Javascript
vue 的 solt 子组件过滤过程解析
2019/09/07 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
写一个Vue loading 插件
2020/11/09 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
python添加模块搜索路径方法
2017/09/11 Python
python实现动态数组的示例代码
2019/07/15 Python
python tkinter图形界面代码统计工具
2019/09/18 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
几款Python编译器比较与推荐(小结)
2020/10/15 Python
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
医科大学毕业生自荐信
2014/02/03 职场文书
教师求职信
2014/06/17 职场文书
学习雷锋标语
2014/06/25 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
2015年领班工作总结
2015/04/29 职场文书
python中取整数的几种方法
2021/11/07 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP
图文详解nginx日志切割的实现
2022/01/18 Servers