<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>marqueen</title>
<style type="text/css">
.yk{
height:30px;
overflow:hidden;
}
#marquee p{
height:30px;
line-height:30px;
margin:0 0 0 0;
}
</style>
</head>
<body>
<div class="yk">
<div id="marquee">
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p>第四行</p>
<p>第五行</p>
</div>
</div>
<script>
function yk(){
var marquee = document.getElementById("marquee");
var offset = 0;
var scrollheight = marquee.offsetHeight;
var firstNode = marquee.children[0].cloneNode(true);
marquee.appendChild(firstNode);//还有这里
setInterval(function(){
if(offset == scrollheight){
offset = 0;
}
marquee.style.marginTop = "-"+offset+"px";
offset += 1;
},50);
}
yk();
</script>
</body>
</html>

marquee上下无缝滚动的更多相关文章

  1. marquee横向无缝滚动无js

    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...

  2. marquee图片无缝拼接滚动

    marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollL ...

  3. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  4. 替换"marquee"，实现无缝滚动

    js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...

  5. marquee标签实现跑马灯效果--无缝滚动

    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...

  6. vue 自定义marquee无缝滚动组件

    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...

  7. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  8. JQuery的无缝滚动

    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

随机推荐

  1. vitual box 虚拟机调整磁盘大小 resize partiton of vitual os

    key:vitual box, 虚拟机,调整分区大小 引用:http://derekmolloy.ie/resize-a-virtualbox-disk#prettyPhoto 1. 关闭虚拟机,找到 ...

  2. NAIPC2018

    NAIPC2018 参考:http://www.cnblogs.com/LQLlulu/p/9513669.html?tdsourcetag=s_pctim_aiomsg https://www.cn ...

  3. Java--类以及对象

    什么是类 就是将一类事物的相同的本质特性抽象出来,类具有属性和方法,属性就是特征(具有什么),方法就是行为(能做什么). 类是一种引用的数据类型,类创建的对象的过程叫做实例化 什么是对象 对象就是类中 ...

  4. Git内部原理（1）

    Git本质上是一套内容寻址文件系统,在此之上提供了VCS的用户界面. Git底层命令(plumbing) vs 高层命令(porcelain) Git的高层命令包括checkout.branch.re ...

  5. 吴裕雄--天生自然python机器学习：使用决策树预测隐形眼镜类型

    解决策树如何预测患者需要佩戴的隐形眼镜类型.使用小数据 集,我们就可以利用决策树学到很多知识:眼科医生是如何判断患者需要佩戴的镜片类型:一旦 理解了决策树的工作原理,我们甚至也可以帮助人们判断需要佩戴 ...

  6. 吴裕雄--天生自然 R语言开发学习：数据集和数据结构

    数据集的概念 数据集通常是由数据构成的一个矩形数组,行表示观测,列表示变量.表2-1提供了一个假想的病例数据集. 不同的行业对于数据集的行和列叫法不同.统计学家称它们为观测(observation)和 ...

  7. Cow Routing（最短路spfa）

    题:https://www.luogu.org/problem/P3115 题意:给出起点A,终点B,N条路线,下面没俩行一个路线,第一行是俩个数,第一个为这条路线的花费,第二个为这条路线经过的点数n ...

  8. 学习python-20191217（1）-Python Flask高级编程开发鱼书_第04章_应用、蓝图与视图函数

    视频01: flask框架:最上层是app,它就像一个插线板一样,比如可以插入蓝图,还可以插入其他各种flask插件. 每个蓝图又可以插入很多视图函数,并可指定静态文件夹和模板文件夹. 好的代码结构, ...

  9. VSTO开发Excel 2013/2016工作簿项目

    范例下载:(下载后直接双击扩展名为.vsto的文件,或者双击扩展名为.xlsx的工作簿,按提示操作) ExcelWorkbook_Everything.rar

  10. 4k高分屏下，chm帮助文档，api文档打开后字体过小的解决

    如图所示: 4k分辨率下,chm文件的正文部分的字体过小,这是这些网页可能使用了CSS维持字体dpi, 在普通分辨率下,可以显示正常,但在高分屏下就会显示得过小,这时我们就需要调整显示网页 的显示效果 ...