基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码</title> <style type="text/css"> *{ margin:0px; padding:0px; border:0px; } body{font-size:12px} #demo{ overflow:hidden; height:80px; width:280px; margin:90px auto; position:relative; } #demo1{ height:auto; text-align:left; } #demo2{ height:auto; text-align:left; } #demo1 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } #demo2 li{ list-style-type:none; height:22px; text-align:left; text-indent:15px; } </style> <script type="text/javascript"> var speed=40 window.οnlοad=function(){ var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop>=demo1.offsetHeight){ demo.scrollTop=0; } else{ demo.scrollTop=demo.scrollTop+1; } } var MyMar=setInterval(Marquee,speed) demo.οnmοuseοver=function(){clearInterval(MyMar)} demo.οnmοuseοut=function(){MyMar=setInterval(Marquee,speed)} } </script> </head> <body> <div id="demo"> <ul id="demo1"> <li><a href="#" target="_blank">脚本之家欢迎您的到来</a></li> <li><a href="#" target="_blank">只有努力才会有美好的明天</a></li> <li><a href="#" target="_blank">没有人一开始就是高手,都是从菜鸟开始</a></li> <li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li> <li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li> <li><a href="#" target="_blank">今天你写代码了吗</a></li> <li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li> </ul> <div id="demo2"></div> </div> </body> </html>
以上代码实现了新闻列表滚动效果,下面介绍一下实现过程:
一.实现原理:
大致原理如下,demo元素中有两个子元素demo1和demo2,并且将demo1中的内容存入demo2中,之所以这样做,是为了当向上滚动的时候,demo2能够接在demo1的后面,否则将不是无缝滚动,而是有缝滚动了,当demo1的内容完全被遮挡之后,也就是demo1完全滚动上去的时候,demo2会恰好位于demo1开始滚动的位置,然后再重新设置demo的scrollTop值,让滚动就重新来过,这样就实现了无缝滚动效果。
基于JS实现新闻列表无缝向上滚动实例代码就给大家介绍到这里,希望大家根据自己的实际需求应用此段代码。
转载于:https://www.cnblogs.com/circleline/p/7794134.html
基于JS实现新闻列表无缝向上滚动实例代码相关推荐
- js 竖向(横向)列表无缝衔接滚动
竖向列表滚动 当前动画,黑色框一屏显示三条数据 可修改黑色框的高度,即可显示一条数据 <!DOCTYPE html> <html lang="en">< ...
- js 停顿一秒_JS 实现可停顿的垂直滚动实例代码
下面小编就为大家带来一篇JS 实现可停顿的垂直滚动实例代码.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 var ScrollMiddle = { 'Odiv':doc ...
- 原生js实现文字无缝向上滚动效果
在网上查找到了一个实现文字无缝向上滚动效果的源码,结果发现运行有问题,于是就稍加改动,实现了js无缝向上滚动的效果. <script>window.onload = roll(50); f ...
- html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
- 示例演示公告通知标题无缝向上滚动,文字段落无缝向上滚动,简单的wangeditor富文本编辑器,简单的音乐播放demo...
用于工作需求接触了公告通知标题内容的无缝向上滚动功能以及使用简单的wang富文本编辑器配置简单的音乐插件demo. 在写之前要先引入相应的js,jquery: 首先是通知标题的无缝向上滚动,这个网上很 ...
- jQuery无缝向上滚动效果
该篇通过js和jquery两种写法来实现内容无缝向上滚动的一个效果,废话不多说,直接上代码 (1)向上滚动 HTML: <div id="demo" style=" ...
- 产品图片无缝水平滚动效果代码
产品图片无缝水平滚动效果代码: 在众多的网站都有这样的效果,那就是产品图片可以不间断的无缝滚动,效果挺美观的,也给静态的页面增加了几分动感,也便利了浏览者查看产品,算是比较好的效果吧,下面就介绍一下如 ...
- 网页图片无缝循环滚动html代码
图片循环滚动代码 图片无缝滚动代码 先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
- html li点隐藏,js控制li的隐藏和显示实例代码
html页面 全部({$count}) 钢琴谱({$count_pu}) 钢琴曲({$count_qu}) 钢琴专辑({$count_zhuanji}) 钢琴全集({$count_quanji}) 钢 ...
最新文章
- Vs2005 正在更新 IntelliSense无法通过的解决办法
- 服务器每秒钟执行命令数量是什么_全国自考互联网及其应用模拟试卷(一)及答案.doc...
- sublime text3安装js提示的插件
- 数据分析专题报告范文6篇_小学生看图写话范文:小熊玩跷跷板?(6篇),让孩子参考练习...
- 在新项目中要思考的技术点
- websocket(二)--简单实现网页版群聊
- 海量数据下的存储技术,哪些模式靠得住?
- Oracle 11g 使用RMAN备份数据库
- ionic 实现 应用内(webview中html页面点击) 和 应用外 (浏览器html页面点击) 打开本地安装应用...
- 设计一个移动应用的本地缓存机制(转)
- Messages.exe (Win32.BMW.l.100640) 病毒的处理方法
- Java开发必备软件安装大全(建议学生党初学Java开发收藏)
- gstreamer插件指南
- 线性代数Python计算:对称矩阵的对角化
- centso系统命令来源查询
- 基于Hexo和GitHub搭建一个免费博客域名图文教学
- 微博视频号搬砖项目,单号月入1000+!
- TiDB2.1 报错statement count 5001 exceeds the transaction limitation, autocommit = false
- 计算机网络带宽是什么意思,带宽是什么有什么意义
- 有赞 CTO 崔玉松:我想打造出中国最好的技术团队
热门文章
- 怎么讲d 盘里的软件弄到桌面_GNOME 2 粉丝喜欢 Mate Linux 桌面的什么?
- php的limit分页,用php数组的array_slice分页和用limit查询分页哪个效率更高?
- 关于Ajax和@RequestBody配合使用的问题
- 【Flink on k8s】JConsole 远程监控 TaskManager
- 【算法】剑指 Offer 06. 从尾到头打印链表
- 95-855-040-源码-调度-Flink Schedule Mode 调度模式
- 【Spark】Spark 2.4 Stream 读取kafka 写入kafka
- 【hortonworks/registries】SchemaVersionLifecycleManager.createSchemaVersion null
- Spark报错: Invalid Spark URL: spark://YarnScheduler@stream_test_nb:40659
- Maven : maven工程libraries没有maven dependencies