marquee上下无缝滚动
<!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上下无缝滚动的更多相关文章
- marquee横向无缝滚动无js
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...
- marquee图片无缝拼接滚动
marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML: 设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollL ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- 替换"marquee",实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
- vue 自定义marquee无缝滚动组件
先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...
- 信息无缝滚动效果marquee
横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
- JQuery的无缝滚动
图片无缝向左滚动的代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- js 无缝滚动效果学习
<!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...
随机推荐
- mysql之存储过程(二)
1.批量根据复杂的SQL查询结果插入到新表 DELIMITER && CREATE PROCEDURE settlePADTEST() begin DECLARE c_s ...
- centos6.8 yum安装mysql 5.6
一.检查系统是否安装其他版本的MYSQL数据 #yum list installed | grep mysql #yum -y remove mysql-libs.x86_64 二.安装及配置 # w ...
- 结构体初始化和new delete
int *p; p=new int[100]; delete []p; 结构体中的指针需要初始化
- 物联网应用层协议选择和分析--MQTT、CoAP 、HTTP、XMPP、SoAP
MQTT协议 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输)最早是IBM开发的一个即时通讯协议,MQTT协议是为大量计算能力有限且工作在低带宽.不 ...
- uboot 编译
. 解包u-boot源码包(u-boot-2016.07) . 配置交叉编译器 根据内核编译里的步骤配置 . 编译uboot yum install ncurses* // ncurses是个终端的图 ...
- Pickle的简单使用
单词Pickle的中文意思是“泡菜.腌菜.菜酱”的意思,Pickle是Python的一个包,主要功能是对数据进行序列化和反序列化.那么什么叫序列化和反序列化呢? 其序列化过程就是把数据转化成二进制数据 ...
- Fiddler 之Filters
转自: https://blog.csdn.net/willcaty/article/details/70144287 Filters功能可以过滤捕获到的Sessions 入口在Fiddler工具的右 ...
- Java基础的坑
仍会出现NPE 需要改成
- NOIP 2004 T3 合唱队形(DP、最长上升/下降子序列)
链接:https://ac.nowcoder.com/acm/contest/1082/C来源:牛客网 题目描述 N位同学站成一排,音乐老师要请其中的(N-K)位同学出列,使得剩下的K位同学排成合唱队 ...
- poj-3661 Running(DP)
http://poj.org/problem?id=3661 Description The cows are trying to become better athletes, so Bessie ...