<!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. 吴裕雄--天生自然 PYTHON3开发学习：字典

    dict = {'} dict1 = { 'abc': 456 } dict2 = { 'abc': 123, 98.6: 37 } dict = {'Name': 'Runoob', 'Age': ...

  2. javascript获取数组最后一个元素（三种方法）

    JavaScript 获取Array末尾元素 一.JavaScript pop() 方法 pop() 方法用于删除并返回数组的最后一个元素. 注意:pop() 方法将删除 arrayObject 的最 ...

  3. 黑科技如何制造人类V2.0？

    黑科技泛指人类尚未成熟但具有巨大潜力的科学技术,智能手机.大数据.扫码支付.电子地图等等都曾属于黑科技范畴,随着时间的推移,它们慢慢成熟,且展现出巨大的能力,影响人类进程,最终黑科技转变成人类伟大的创 ...

  4. [GX/GZOI2019]特技飞行（扫描线+置换）

    感觉是6题中最难的一题,其实这题是一个二合一: 第一问:给定平面上若干点和k个关键点,关键点覆盖一个45°倾斜的正方形范围r,求有多少点被至少一个关键点覆盖.这个可以曼哈顿转切比雪夫距离,然后再扫描线 ...

  5. 在线好用的json转xml超级好用在线json与xml互相转换

    在线好用的json转xml超级好用在线json与xml互相转换 拿走不谢:http://www.yzcopen.com/json/jsonxmlformat

  6. HEX 文件格式

    例 FDFFF885C3 :每行开头 第一个字节:表示本行的数据长度, 第二个,第三个字节表示本行数据的起始地址. 第四字节表示数据类型,数据类型有:0x00.0x01.0x02.0x03.0x04. ...

  7. 2019-2020-1 20199324《Linux内核原理与分析》第三周作业

    第二章 操作系统是如何工作的 一.知识点总结 1.计算机的三个法宝 存储程序计算机 函数调用堆栈机制.堆栈:是C语言程序运行时必须使用的记录函数调用路径和参数存储的空间. 中断 2.堆栈相关的寄存器和 ...

  8. 吴裕雄--天生自然python学习笔记：python 用 Open CV通过人脸识别进行登录

    人脸识别登录功能的基本原理是通过对比两张图片的差异度来判断两张图片是 否是同 一人的面部 . 对比图片 差异度 的算法有很多种,本例中使用“颜色直方图” 算法来实现对人脸图像的识别. 下面为比较 im ...

  9. vue实现tab选项卡切换

    上代码: <template>   <div class="push">     //点击按钮     <div class="tab&qu ...

  10. javaweb三大框架SSH

    1.MVC三层架构:模型层,控制层和视图层.模型层,用Hibernate框架让来JavaBean在数据库生成表及关联,通过对JavaBean的操作来 对数据库进行操作:控制层,用Struts框架来连接 ...