首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于javascript的无缝滚动动画1

Posted in Javascript onAugust 07, 2020

无缝滚动好像是互联网广告最大的一个载体，可以用“无处不在”来形容它。不过它比起早期的闪光字体，浮动广告算进步了。由于需求巨大，做前台迟早会遇到它。我先给出结构层部分，再慢慢讲解其实现原理。

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="无缝滚动"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="无缝滚动"/>
 </dt>
 <dd></dd>
</dl>

我自认为这个结构比网上那些纯DIV的结构好许多，起码可以节省许多id与class。都不知那个傻冒最先提出“DIV+CSS”这个说法，正确的说法应该是"xhtml+CSS"。换言之，就是在宏观的布局上，用块状元素代替table，由于DIV的默认样式较少，因此比较常用，table则回归和专注于数据显示。在微观的格式化上，用CSS代替原来b、big、center、i 、s、small、 strike、tt这些单纯用于样式设置的标签，很明显CSS的能力比它们更强大。

实现原理与纯CSS相册点击锚点切换相应的图片差不多，都是利用scrollTop。过程如下，因为我们设置dl的overflow为hidden，所以其左边的滚动条就不可见了。当我们不断增加其scrollTop时，它的内容就不断往上移动，抵达到dl的可视区，把原来上面可见内容挤掉，效果有点像设置了dl的margin-top为负数。继续增加scrollTop，直到我们看到dd元素。这时，我们要看一下dt元素了，原本它为空元素，克隆了dd元素的图片，其实是为了起一个遮眼法的效果。当dt元素完全被dd元素挤出dl的可视区时，我们惊讶地发现，这时dl元素可视区的样子和它最初的样式是一模一样的。dd元素拷贝dt元素的图片的作用也在于此。但继续往下走，就肯定会露馅，因为dd元素下面就没有元素了，没有图片给我们显示了。因此就在这一刻，我们把dl的元素scrollTop打回原形，重新回到dt元素图片的显示中。

那么问题是这一刻我们怎样确定呢？关键是这句“dt元素完全被dd元素挤出dl的可视区”，我们可以取dt元素的offsetHeight，这是dt元素的高加上padding与border，也可以取dd的offsetTop，这是dd元素顶部到dl元素顶部的距离。考虑到IE的怪癖模式，我决定先用offsetTop。既然要用offsetTop，我们需要指定offsetParent。不过许多教程都忘记了为dl元素设置position:relative。因为在IE6中，offsetParent直接为元素的父元素，而IE7，IE8与标准浏览器则为离它最近的被定了位的父级元素，没有则为body元素。

#marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
}
#marquee img {
 display:block;
}
#marquee dd {
 margin:0px;
 padding:0px;
}
var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){ 
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
 Marquee("marquee");
}
<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 height:300px;
 width:200px;
 overflow:hidden;
 border:10px solid #369;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

上面的例子是向上滚动，向下滚动只不过是一开始把dl元素的scrollTop设置成dd元素的offsetTop的值，然后递减就是！

<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 height:300px;
 width:200px;
 overflow:hidden;
 position:relative;
 border:10px solid #F2F1D7;
 }
 #marquee img {
 display:block;
 }
 #marquee dd {
 margin:0px;
 padding:0px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollTop = clone.offsetTop;
 var rolling = function(){
 if(container.scrollTop == 0){
 container.scrollTop = clone.offsetTop;
 }else{
 container.scrollTop--;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向下滚动) by 司徒正美</h1>

<dl id="marquee">
 <dt>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/>
 </dt>
 <dd></dd>
</dl>

至于向左滚动就相对麻烦些。首先我们要把图片横着排列，包括dt元素里面的，还有后来克隆到dd元素的，这要求用到浮动。但这还未完，我们还要让dt元素与dd元素横着排列，于是我们就得对dl元素进行设置浮动。同时我们还得对dl元素的宽设置一个很大的值，目的是让它不换行，并且能一字排开所有图片。我设置为1000%，即浏览器的宽的十倍。对于图片，它浮动时，左右之间都存在间隙，设置margin与padding为0这样常现的方法是无法去掉它们。只好走极端了，让它们外套一个a元素，反正现实中当我们点击图片时它一定会跳转到另一个页面或页面的另一个地方，这就是用a元素来做的。由于a元素是内联元素，不存在盒子元素，它会向内收缩，把图片外面的空隙吞噬掉。最后，我们没有理由一下子显示所有图片，因此我们再在dl元素外面套一个div，在那里设置overflow与position与width等关键样式。

<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt="无缝滚动"</a>
 <a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt="无缝滚动"</a>
 </dt>
 <dd></dd>
 </dl>
</div>
#marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
}
#marquee img {
 border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
}
#marquee dl{
 width:1000%;
 height:150px;
}

javascript就没多大改动，只不过将offsetTop换成offsetLeft，scrollTop换成scrollLeft。因此熟悉CSS，真是好处多多。

var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #B45B3E;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 var rolling = function(){
 if(container.scrollLeft == clone.offsetLeft){
 container.scrollLeft = 0;
 }else{
 container.scrollLeft++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向左滚动) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

向右滚动也不难，照瓢画葫芦就是！

<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee {
 position:relative;
 width: 400px;
 overflow:hidden;
 border: 10px solid #8080C0;
 }
 #marquee img {
 border:0px;
 }
 #marquee dl, #marquee dt,#marquee dd,#marquee a {
 float:left;
 margin:0;
 padding:0;
 }
 #marquee dl{
 width:1000%;
 height:150px;
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("dt")[0],
 clone = container.getElementsByTagName("dd")[0],
 speed = arguments[1] || 10;
 clone.innerHTML=original.innerHTML;
 container.scrollLeft = clone.offsetLeft
 var rolling = function(){
 if(container.scrollLeft == 0){
 container.scrollLeft = clone.offsetLeft;
 }else{
 container.scrollLeft--;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向右滚动) by 司徒正美</h1>
<div id="marquee">
 <dl>
 <dt>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 <a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript无缝滚动 by 司徒正美"/></a>
 </dt>
 <dd></dd>
 </dl>
</div>

再来一个滚动文字的，感觉这东西与tab一样，最大的优点是在有限的空间显示海量的信息。

<!doctype html>
<title>javascript无缝滚动 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript无缝滚动 by 司徒正美" />
<meta name="description" content="javascript无缝滚动 by 司徒正美" />
<base href="http://www.cnblogs.com/rubylouvre/archive/2009/">
<style type="text/css">
 h1 {
 font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
 }
 #marquee,#marquee li {
 margin:0;
 padding:0;
 list-style:none;
 }
 #marquee {
 position:relative;
 height:100px;
 width:280px;
 overflow:hidden;
 border:10px solid #c0c0c0;
 }
 #marquee a {
 display:block;
 padding:5px;
 text-decoration:none;
 white-space: nowrap;
 color:#000;
 }
 #marquee a:hover{
 background: #efefda;
 color:#3bcdfe
 }
</style>
<script type="text/javascript">
 var Marquee = function(id){
 try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
 var container = document.getElementById(id),
 original = container.getElementsByTagName("li")[0],
 speed = arguments[1] || 10,
 clone = original.cloneNode(true);
 container.appendChild(clone);
 var rolling = function(){
 if(container.scrollTop == clone.offsetTop){
 container.scrollTop = 0;
 }else{
 container.scrollTop++;
 }
 }
 var timer = setInterval(rolling,speed)//设置定时器
 container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
 container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
 }
 window.onload = function(){
 Marquee("marquee");
 }
</script>
<h1>javascript无缝滚动(向上滚动) by 司徒正美</h1>
<ul id="marquee">
 <li>
 <a href="08/08/1541914.html">一步步教你实现纯CSS的柱形图</a>
 <a href="09/02/1558998.html">javascript十个最常用的自定义函数</a>
 <a href="08/24/1552862.html">javascript鼠标事件总结</a>
 <a href="09/14/1566157.html">一个很简单的淡入淡出相册</a>
 <a href="09/18/1568925.html">纯CSS相册</a>
 <a href="08/13/1544365.html">一步步教你实现表格排序（第一部分）</a>
 </li>
</ul>

到此这篇关于基于javascript的无缝滚动动画实现的文章就介绍到这了,更多相关javascript无缝滚动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

基于javascript的无缝滚动动画1

- Author -

司徒正美

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
JS图片无缝滚动(简单利于使用)
Jun 17 Javascript
jquery中加载图片自适应大小主要实现代码
Aug 23 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
Javascript小技巧之生成html元素
May 15 Javascript
jQuery插件开发的五种形态小结
Mar 04 Javascript
JS打字效果的动态菜单代码分享
Aug 21 Javascript
Ajax基础知识详解
Feb 17 Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
Oct 18 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 #Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 #Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 #Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 #Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 #Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 #Javascript
解决vue动态下拉菜单 有数据未反应的问题
Aug 06 #Javascript
字符串(2) PostMapping(1) jenkins(1) Seaborn(1) yolo3(1) ResNet50(1) Xception(1) Inception(2) 逆序(1) tensorflow(2)
You might like
基于php常用正则表达式的整理汇总
2013/06/08 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP JS Ip地址及域名格式检测代码
2013/09/27 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
cookie丢失问题(认证失效) Authentication （用户验证信息）也会丢失
2009/06/04 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
2016/06/06 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
Javascript将数值转换为金额格式（分隔千分位和自动增加小数点）
2016/06/22 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
js实现碰撞检测特效代码分享
2016/10/16 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
layui表格数据重载
2019/07/27 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
详解Python的Django框架中的中间件
2015/07/24 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
python在openstreetmap地图上绘制路线图的实现
2019/07/11 Python
pytorch 模型可视化的例子
2019/08/17 Python
Python:合并两个numpy矩阵的实现
2019/12/02 Python
Python动态导入模块：__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python访问hdfs的操作
2020/06/06 Python
英国男女豪华配饰和礼品网站：Black.co.uk
2020/02/28 全球购物
幼儿园庆六一游园活动方案
2014/01/29 职场文书
2014年创卫实施方案
2014/02/18 职场文书
物流管理系毕业生求职信
2014/06/03 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
监考失职检讨书
2015/01/26 职场文书
党员转正意见怎么写
2015/06/03 职场文书
公司会议开幕词
2016/03/03 职场文书