<!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. Java零基础学习详解

    01DButils工具类的介绍个三个核心类 * A: DButils工具类的介绍个三个核心类 * a: 概述 * DBUtils是java编程中的数据库操作实用工具,小巧简单实用. * DBUtils ...

  2. 数学是什么？_题跋—>数学是什么？

    题跋—>数学是什么? 数学的定义在不同的解释中有不同的释义,它又像是哲学.又像是逻辑性:即研究数量关系.有研究结构和空间关系等等.因此很难给予一个非常准确的定义,正因为如此数学是渗透于生活的各个 ...

  3. i春秋web作业2.24

    Web安全工程师(入门班) [全国线上入门班53期]课后作业   2020-2-24 DorinXL   分别尝试安装一个Windows和Linux操作系统 想要在虚拟机上装系统,首先需要下载对应的镜 ...

  4. [LC] 146. LRU Cache

    Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...

  5. day09-正侧表达式

    while True: phone_num = input('please input your phone_num:') if len(phone_num) == 11 \ and phone_nu ...

  6. Jarque-Bera test|pp图|K-S检验|

    Jarque-Bera test: 如何绘制pp图?   找该直线的截距和斜率,通过截距和斜率的值找到正态参数均值和方差,可对这些正态参数进行正态检验. K-S检验的的特点? 并不是只针对正态分布,是 ...

  7. springboot shiro ehcache redis 简单使用

    引入相关pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  8. windows cmd下netstat查看占用端口号的进程和程序

    其实很简单,大家可以在cmd窗口 C:\Documents and Settings\Administrator>netstat -help 显示协议统计信息和当前 TCP/IP 网络连接. N ...

  9. bzoj 3450 Tyvj1952 Easy (概率dp)

    3450: Tyvj1952 Easy Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败 ...

  10. 吴裕雄--天生自然python学习笔记：python用 Selenium 组件实现浏览器操作自动化

    一般情况下,我们都是用手工操作的方式来对浏览器进行各种操作 . 实际上, 只要我们安装一个自动化操作组件, Python 就可以让我们的很多操作实现自动化 . Selenium 组件 在开发网页时,用 ...