原生js实现文字循环向上滚动效果

css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度，最好比内容区域高度低点，产生滚动条)

   #scrollArea {width: 400px; height: 150px; border: 2px solid blue; overflow: hidden}

html结构部分

   <div id="scrollArea"><ul><li>生存，就是最谨慎的战斗。</li><li>到达胜利之前，无法回头。</li><li>净化的终点是自我毁灭。</li><li>没有永恒的朋友，只有永恒的利益。</li><li>不能击败我的，会让我更强大。</li><li>静如影，疾如风。不动如山，迅烈如火。</li><li>别在来不及的时候后悔。</li><li>最好的剑，永远是下一把。</li></ul></div>

js部分

/*** scrollTop  (滚动的高度既能‘设置'滚动值，也能‘获取'滚动值)* clientHeight 元素的像素高度，包含元素的高度+内边距，不包含水平滚动条，边框和外边距* scrollHeight 元素内容的高度，包括溢出的不可见内容*///时间间隔var delay = 50//定时器任务var handler = function () {//向上移动1px$('#scrollArea').scrollTop = $('#scrollArea').scrollTop + 1if (Math.ceil($('#scrollArea').clientHeight + $('#scrollArea').scrollTop) >= $('#scrollArea').scrollHeight) {var ulCopy = $('#scrollArea').firstElementChild.cloneNode(true)$('#scrollArea').append(ulCopy)//当克隆的ul达到一定数量时，删除第一个ulif (document.getElementsByTagName('ul') && document.getElementsByTagName('ul').length >= 3) {$('#scrollArea').removeChild($('#scrollArea').firstElementChild)}}}//启动定时器setInterval(handler, delay)function $(selector) {return document.querySelector(selector)}

原生js实现文字循环向上滚动效果相关推荐

原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
html文字整体向上滚动代码,js实现文字无缝向上滚动
静态效果如下:(动态效果复制粘贴下面代码可见) 代码如下: *{ padding: 0; margin:0; } ul,li{ list-style: none } .scroll { height: ...
js文字无限循环向上滚动
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
关于文字向上滚动效果
1.文字无缝向上滚动 <div class="tui-new-apply clearfix"><span>[最新资讯]</span><ul ...
JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果在谈组件之前来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的貌似说我用招商银行信用卡在今年的6月23日借了招商银行 ...
简单的jQuery无缝向上滚动效果
简介这是一个基于 jQuery 的简单的向上滚动效果插件,代码很少,功能也比较单一,可用于文字或图片滚动,鼠标移动到上面会暂停滚动.功能虽然单一,不过一般情况下也够用了,而且还很小巧. 兼容兼容所 ...
php侧边栏导航效果,原生js实现电商侧边导航效果
知识要点实现原理: 1.点击楼层跳相应楼层,用的是锚点定位电梯:2F 个护家清列表title: 这个没什么好说的 2.当点击楼层跳到相应楼层时,该楼层高亮显示我们的脚本主要就是实现这个功能. ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
文字无限无缝滚动效果——和派孔明
文字无限无缝滚动效果--和派孔明 <!DOCTYPE html> <html lang="en"> <head><meta charset ...

原生js实现文字循环向上滚动效果

原生js实现文字循环向上滚动效果

原生js实现文字循环向上滚动效果相关推荐

最新文章

热门文章