基于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中注册和移除事件的4种方式
Mar 20 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
Aug 09 Javascript
js 获取html5的data属性实现方法
Jul 28 Javascript
基于ajax和jsonp的原生封装(实例)
Oct 16 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
JS异步宏队列微队列原理详解
Sep 09 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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插入排序实现代码
2013/04/04 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
实测jquery data()如何存值
2013/08/18 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
Bootstrap精简教程
2015/11/27 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
2017/09/14 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
python中Matplotlib实现绘制3D图的示例代码
2017/09/04 Python
Python集合操作方法详解
2020/02/09 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python持续监听文件变化代码实例
2020/07/22 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
描述Cookie和Session的作用,区别和各自的应用范围,Session工作原理
2015/03/25 面试题
司仪主持词两篇
2014/03/22 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
Python pyecharts案例超市4年数据可视化分析
2022/08/14 Python