DDR爱好者之家

基于javascript的无缝滚动动画1
站长资源 2024/12/26 佚名
71 1538
DDR爱好者之家 Design By 杰米

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

<dl id="marquee">
 <dt>
 <img src="/UploadFiles/2021-04-02/o_s017.jpg">


我自认为这个结构比网上那些纯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="/UploadFiles/2021-04-02/o_s017.jpg">


上面的例子是向上滚动，向下滚动只不过是一开始把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="/UploadFiles/2021-04-02/o_s017.jpg">


至于向左滚动就相对麻烦些。首先我们要把图片横着排列，包括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="/UploadFiles/2021-04-02/o_s017.jpg">





#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="/UploadFiles/2021-04-02/o_s017.jpg">


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





<!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="/UploadFiles/2021-04-02/o_s017.jpg">


再来一个滚动文字的，感觉这东西与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>





                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米

                            

                        

                        

                            

                                广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）

                                免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
                            

                        

                        

                            
                            
                        

                        
                        
DDR爱好者之家 Design By 杰米

                        
                        
                    

                    

                        

                            

                                

                                    

                                        

                                    

                                    

                                        

                                            
                                        

                                    

                                

                                

                                    
ddrfans.com
                                            
                                                DDR爱好者之家 
                                    

                                    

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                        

                                            
                                        

                                    

                                    

                                    

                                        

                                            8,675无损音乐
                                        

                                        

                                            1,324高清电影
                                        

                                        

                                            213破解软件
                                        

                                        

                                            70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米