<!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. [原]procexp替换任务管理器

    2019-09-14更新:本文已经在新博客重新整理发布,请各位读者移步. process explorer有个功能是替换任务管理器,它是怎么实现的呢???   windows有个注册表项HKEY_LO ...

  2. 新年在家学java之基础篇-参数&修饰符&构造器

    可变参数 不知道可能给方法传递多少个参数时使用这个方法 public void printInfo (String[] args) --可以定义一个数组,在调用这个方法适合赋值给一个数组 public ...

  3. 量化投资_TB交易开拓者A函数和Q函数详解

    //////////////////A函数详解/////////////// //A函数主要在端口上进行下单操作//////////////// A_AccountID说明 返回当前公式应用的交易帐户 ...

  4. 4）模板输出方法和 fetch总结

    (1)fetch函数虽然在我们定义的controller中使用,但是它并不属于Controller.php文件,它属于View.php文件,因为我们的每一个控制器继承了Controller.php文件 ...

  5. day29-struct模块解决黏包问题

    #struct模块可以把一个数据类型,例如数字int,转化成固定长度(4个字节)的bytes.int转为4个bytes. #在大量传输数据之前先告诉接收端即将接收数据的大小,方可解决黏包问题: #利用 ...

  6. 微信公众平台开发2-access_token获取及应用（含源码）

    微信公众平台开发-access_token获取及应用(含源码) 很多系统中都有access_token参数,对于微信公众平台的access_token参数,微信服务器判断该公众平台所拥有的权限,允许或 ...

  7. Leetcode1_两数之和

    题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同 ...

  8. 点分治——POJ 1741

    写的第一道点分治的题目,权当认识点分治了. 点分治,就是对每条过某个点的路径进行考虑,若路径不经过此点,则可以对其子树进行考虑. 具体可以看menci的blog:点分治 来看一道例题:POJ 1741 ...

  9. HLS图像处理总结（一）

    HLS工具 以个人的理解,xilinx将HLS(高层次综合)定位于更方便的将复杂算法转化为硬件语言,通过添加某些配置条件HLS工具可以把可并行化的C/C++的代码转化为vhdl或verilog,相比于 ...

  10. MongoDBcrud操作，采集部分代码

    using System; using System.Collections.Generic; using System.ComponentModel.Design; using System.Lin ...