<!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. RegexUtil

    package org.linlinjava.litemall.core.util; import java.util.ArrayList; import java.util.Collections; ...

  2. 共克时艰，停工不停学 Serverless 在线课堂免费开课

    二月份,Serverless 团队联合腾讯云大学与云+社区免费推出 Serverless 在线直播课程,课程涵盖 Serverless 架构解密.技术解析以及不同应用场景下的最佳实战指导,让你从 0 ...

  3. 项目引入nacos 日志不显示问题

    禁用nacos的日志即可解决 idea当中 添加vm options参数即可 -Dnacos.logging.default.config.enabled=false 打包后的启动命令  java - ...

  4. django框架进阶-ModelForm组件-长期维护

    ############################################################ """ 通常在Django项目中,我们编写的大部 ...

  5. dbSNP|n SwissVar|n CanProVar|CHPP|mutation assessor|

    癌症蛋白质基因组学主要研究driver性质的突变,该突变有可能是转化为癌基因的突变.抑癌基因突变.药物位点突变和蛋白突变,可以使用mutation assessor 预测突变 突变导致疾病,修饰仅影响 ...

  6. java和javascript日期详解

    ** java,js日期转换:** <Excerpt in index | 首页摘要> java的各种日期转换 <The rest of contents | 余下全文> 日期 ...

  7. JQ主页图片划动切换效果

    .wrapper { width: 726px; float: left; } #jiao_dian { width: 980px; *height: 292px; margin-top: 10px; ...

  8. 基于hibernate的BaseDao及其实现类的设计

    以前做设计的时候dao接口和它的实现了,这样子就不必写这么多的重复代码了.但由于对反射没有了解,除非依赖hibernate的其他组件,否则写不出来.不过,有了反射,我们可以通过泛型来实现我们想要做的功 ...

  9. DP × KMP

    几道用到KMP的DP题: hdu 5763    hdu 3689    hdu 3336    codeforces 494B    codevs 3945 关于KMP的nx数组: 如果在本文中看见 ...

  10. 自定义一个简单的SegmentedControl

    先大概看下我们想实现简单的效果 源码 // // DSegmentedControl.swift // IOS学习之自定义UISegmentedControl // // Created by din ...