<!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. sklearn包

    sklearn官方学习资料 https://scikit-learn.org/stable/user_guide.html 1 Supervised learning监督学习 1.1 线性模型 1.2 ...

  2. rsync+nfs+sersync实战案例

    回顾: 1.rsync 统一备份各个服务器的配置文件或重要文件 系统配置文件 日志文件 系统日志文件 messages.secure.cron 服务日志文件 access_log.access.log ...

  3. 编译原理_P1004

    龙书相关知识点总结 //*************************引论***********************************// 1. 编译器(compiler):从一中语言( ...

  4. java通过免费接口获取ip地址的服务商信息

    今天分享一个免费在线的小工具的开发代码就是通过淘宝提供的接口获取服务商信息,工具地址:http://www.yzcopen.com/seo/ipadress 代码如下: public class Yz ...

  5. Linux系统安装及配置ftp服务

    1. 先用rpm -qa| grep vsftpd命令检查是否已经安装,如果ftp没有安装,使用yum  -y  install vsftpd 安装,(ubuntu 下使用apt-get instal ...

  6. 1059 C语言竞赛 (20 分)

    题目:1059 C语言竞赛 (20 分) C 语言竞赛是浙江大学计算机学院主持的一个欢乐的竞赛.既然竞赛主旨是为了好玩,颁奖规则也就制定得很滑稽: 0.冠军将赢得一份“神秘大奖”(比如很巨大的一本学生 ...

  7. EncryptUtils

    package me.zhengjie.core.utils; import org.springframework.util.DigestUtils; import javax.crypto.Cip ...

  8. 单独安装jenkins-没有tomcat

    这里讲解war包的安装:windows的msi版安装很简单,双击即可,不用讲 1.官网下载 2. 3.把war包放到java目录下 4. 5.安装完成后打开:127.0.0.1:8080 输入密码后会 ...

  9. JavaScript中对象数组去重方法

    在一次对后端返回的对象数组的操作时想通过indexOf()或者includes()的方法来实现对对象数组的去重但是行不通,因为用indexOf()返回的都是-1,一下记录两种对象数组(更具指定属性)去 ...

  10. 吴裕雄--天生自然 R语言开发学习：基本数据管理

    #---------------------------------------------------------# # R in Action (2nd ed): Chapter 4 # # Ba ...