基于JS实现新闻列表无缝向上滚动实例代码


Posted in Javascript onJanuary 22, 2016

当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<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.onload=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.onmouseover=function(){clearInterval(MyMar)} 
demo.onmouseout=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实现新闻列表无缝向上滚动实例代码就给大家介绍到这里,希望大家根据自己的实际需求应用此段代码。

Javascript 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
JavaScript DOM 对象深入了解
Jul 20 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
vue 巧用过渡效果(小结)
Sep 22 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
vue获取验证码倒计时组件
Aug 26 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 Javascript
jQuery validate插件实现ajax验证重复的2种方法
Jan 22 #Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 #Javascript
如何利用JS通过身份证号获取当事人的生日、年龄、性别
Jan 22 #Javascript
jQuery解析json格式数据简单实例
Jan 22 #Javascript
基于javascript实现根据身份证号码识别性别和年龄
Jan 22 #Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 #Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 #Javascript
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP中通过HTTP_USER_AGENT判断是否为手机移动终端的函数代码
2013/02/14 PHP
ThinkPHP3.2.2的插件控制器功能
2015/03/05 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
JQUBar 基于JQUERY的柱状图插件
2010/11/23 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jQuery为某个div加入行样式
2017/06/09 jQuery
JavaScript基本语法_动力节点Java学院整理
2017/06/26 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
微信小程序与后台PHP交互的方法实例分析
2018/12/10 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
2020/07/12 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
numpy库ndarray多维数组的维度变换方法(reshape、resize、swapaxes、flatten)
2020/04/28 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
早餐连锁店计划书
2014/01/08 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
美术教师自我鉴定
2014/02/12 职场文书
乡镇食品安全责任书
2014/07/28 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
小兵张嘎观后感
2015/06/03 职场文书