基于javascript的无缝滚动动画1

时间：2021-05-25

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

<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://mand("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无缝滚动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章