js的marquee标签，可以实现元素循环滚动，但是不能无缝连接，要实现“无缝滚动”的效果必须使用js（借鉴百度），思路是使要滚动元素相对位置不断改变，上下滚动就相对top或者bottom，左右滚动就是left或者right，接下来是实现方法：实现li标签上下无缝滚动

　　废话少说，粘贴代码，可以直接运行。

　　　　　　　　　　　　　　　　　　　　
<!DOCTYPE html>
<html>
　　<head>
　　　　<title>测试滚动</title>
　　　　<!-- 引入在线Jquery -->
　　　　<script src="http://code.jquery.com/jquery-latest.js"></script>
　　</head>
　　<style>
　　　　#marquee li {
　　　　height: 30px;
　　　}
　　</style>
<body>
　　<div style="height:180px;overflow:hidden;">
　　　　<div id="marquee">
　　　　　　<li>
　　　　　　　　<span>1.水规院自动化码头设计关键技术研究工作交流会顺利召开</span>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<span>2.巨型通航建筑物通航标准体系研究</span>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<span>3.中交集团跃居世界500强第210位</span>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<span>4.中交股份获评多项长江口深水航道治理工程建设先进</span>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<span>5.海南省与中交股份将全方位合作</span>
　　　　　　</li>
　　　　　　<li>
　　　　　　　　<span>6.长江船舶设计院获中国标准创新贡献一等奖</span>
　　　　　　</li>
　　　　</div>
　　</div>
</body>
<script>
　　window.onload = function () {
　　　　scrolldiv();
　　　　// 鼠标停留，离开
　　　　$("#marquee").mouseenter(function () {
　　　　　　window.clearInterval(timename);
　　 });
　　　　$("#marquee").mouseleave(function () {
　　　　　　timename = setInterval("doScroll()", 50);
});
}
　　var marquee = document.getElementById("marquee");
　　var offset = 0;
　　var scrollheight = marquee.offsetHeight;
　　var length = marquee.children.length;
　　function scrolldiv() {
　　　　// 不可见处增加同等数量的li元素，模拟无缝连接（实际应该最上面li元素
　　　　// 滚动到不可见之后，删除最上面li元素，再给div末尾添加删除的li元素）
　　　　for (vari = 0; i < length - 1; i++) {
　　　　　　var node = marquee.children[i].cloneNode(true);
　　　　　　marquee.appendChild(node);
　　}
　　　　// 执行滚动，利用margin-top
　　　　timename = setInterval("doScroll()", 50);
}
　　function doScroll() {
　　　　if (offset == scrollheight) {
　　　　　　offset = 0;
}
　　　　marquee.style.marginTop = "-" + offset + "px";
　　　　offset += 1;
}
</script>
</html>




核心思路：1.增加可见高度的元素（appendChild)。


　　　　    2.定时刷新margin-top使div上移模拟滚动。


以上技术参考其他人，如有侵权，欢迎来电。


 
												


											
替换"marquee"，实现无缝滚动的更多相关文章
	

    
						
  1. marquee横向无缝滚动无js
		
    <!DOCTYPE html><html><head><meta charset="utf-8"> <title>< ...
    
		
    2. 
						
  2. marquee上下无缝滚动
		
    <!DOCTYPE html><html><head><meta charset="utf-8"><meta name=&qu ...
    
		
    3. 
						
  3. marquee图片无缝拼接滚动
		
    marquee图片无缝滚动 先了解一下对象的几个的属性: innerHTML:     设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollL ...
    
		
    4. 
						
  4. JS 在 HTML  无缝滚动
		
    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
    
		
    5. 
								
  5. marquee标签实现跑马灯效果--无缝滚动
		
    今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果.但无意中发现了一个html标签——<marquee> ...
    
		
    6. 
						
  6. vue  自定义marquee无缝滚动组件
		
    先上效果图: (1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的. (2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后.这 ...
    
		
    7. 
						
  7. 信息无缝滚动效果marquee
		
    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...
    
		
    8. 
						
  8. JQuery的无缝滚动
		
    图片无缝向左滚动的代码如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
    
		
    9. 
						
  9. JS 阶段小练习~ 无缝滚动
		
    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Qt5教程: (7) 模态/非模态对话框
			
    模态对话框就是在其没有被关闭之前,用户不能与同一个应用程序的其他窗口进行交互,直到该对话框关闭. 非模态对话框就是在被打开时,用户既可选择和该对话框进行交互,也可以选择同应用程序的其他窗口交互. 1. ...
    
			
    2. 
						
  2. Ubuntu分区方案
			
    swap: 4G(跟你自己内存一样大):主分区:空间起始位置:用于交换空间 /boot: 300M(太小会导致软件无法升级):逻辑分区:空间起始位置:EXT4:/boot /: 30G:主分区:空间起 ...
    
			
    3. 
						
  3. 关于参加AWD攻防比赛心得体会
			
    今天只是简单写下心得和体会 平时工作很忙 留给学习的时间更加珍少宝贵. 重点说下第二天的攻防比赛吧  . 三波web题 .涉及jsp,php,py. 前期我们打的很猛.第一波jsp的题看到有首页预留后 ...
    
			
    4. 
						
  4. [牛客网NOIP赛前集训营-普及组（第二场）]D-合法括号序列
			
    链接:https://www.nowcoder.com/acm/contest/165/D来源:牛客网 合法括号序列 键盘上有左括号(,右括号),和退格键-,共三个键. 牛牛希望按键n次,使得输入的字 ...
    
			
    5. 
						
  5. POJ 1276 Cash Machine(多重背包的二进制优化)
			
    题目网址:http://poj.org/problem?id=1276 思路: 很明显是多重背包,把总金额看作是背包的容量. 刚开始是想把单个金额当做一个物品,用三层循环来 转换成01背包来做.T了… ...
    
			
    6. 
						
  6. 《HTML5+CSS3+JavaScript 从入门到精通（标准版）》学习笔记（一）
			
    以下是以代码形式书写的笔记,本系列会持续更新,主要内容预计是类似下文的笔记,兼或一些思考与小项目,希望对你会有所帮助 1 <!-- --> <!DOCTYPE html>< ...
    
			
    7. 
						
  7. 关于Java 项目的思考总结
			
    Java 项目思考总结 前言 今天是2017年3月25日,笔者已经毕业半年,工作经验一年. 正好有心思写这个总结. 持续开发 对于Java项目,我所接触的一般就是JavaWeb项目和 Java Jar ...
    
			
    8. 
						
  8. 追查Could not get a databaseId from dataSource
			
    Mybatis 创建连接池的时候报错: ERROR 2017-03-15 00:44:50,333 commons.JakartaCommonsLoggingImpl:38 Could not get ...
    
			
    9. 
						
  9. OptimalSolution(1)--递归和动态规划（2）矩阵的最小路径和与换钱的最少货币数问题
			
    一.矩阵的最小路径和 1 3 5 9 1 4 9 18 1 4 9 18 8 1 3 4 9 9 5 8 12 5 0 6 1 14 14 5 11 12 8 8 4 0 22 22 13 15 12 ...
    
			
    10. 
						
  10. vue的数据双向绑定
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    11.