基于javascript的无缝滚动动画1

网络编程 2024/12/28 佚名
3 2 1
无缝滚动好像是互联网广告最大的一个载体，可以用“无处不在”来形容它。不过它比起早期的闪光字体，浮动广告算进步了。由于需求巨大，做前台迟早会遇到它。我先给出结构层部分，再慢慢讲解其实现原理。
<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>



                                
                                
                                    javascript无缝滚动,javascript滚动 
                                
                                    标签：
                                        javascript无缝滚动,javascript滚动
                                     

                            
                        
                        
                            
                                免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
                                如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
                            
                        
                        
                            
                                
                                    上一篇
                                    JavaScript实现多文件下载方法解析
                                
                            
                            
                                
                                    下一篇
                                    vue-router重写push方法,解决相同路径跳转报错问题
                                
                            
                        
                        
                        
                            
                                
                                
                                    评论“基于javascript的无缝滚动动画1”
                                
                            
                            
                                
                                    
                                        
                                            
                                                基于javascript的无缝滚动动画1
                                            
                                            
                                                
                                            
                                            
                                                
                                                
                                                
                                            
                                            
                                        
                                    
                                    
                                    
                                        暂无“基于javascript的无缝滚动动画1”评论...
                                    
                                
                            
                        
                        
                    
                    
                        
                            
                                
                                    
                                        
                                    
                                    
                                        
                                            
                                        
                                    
                                
                                
                                    www.imxmx.com
                                            
                                                杰晶网络 
                                    
                                    
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                        
                                            
                                        
                                    
                                    
                                    
                                        
                                            8,675无损音乐
                                        
                                        
                                            1,324高清电影
                                        
                                        
                                            213破解软件
                                        
                                        
                                            120,141站长资源
                                        
                                    
                                
                            
                            
                                最新文章
                                
                                    
                                         
                                       
                                            
                                                
                                            
                                            
                                                
                                                    群星《奔赴！万人现场 第2期》[FLAC/分轨][5
                                                
                                                
                                                    
                                                        2024/12/28
                                                        
                                                         43
                                                    
                                                
                                            
                                        
 
                                       
                                            
                                                
                                            
                                            
                                                
                                                    群星《奇妙浪一夏 (上海迪士尼度假区音乐)》
                                                
                                                
                                                    
                                                        2024/12/28
                                                        
                                                         32
                                                    
                                                
                                            
                                        
 
                                       
                                            
                                                
                                            
                                            
                                                
                                                    群星《奇妙浪一夏 (上海迪士尼度假区音乐)》
                                                
                                                
                                                    
                                                        2024/12/28
                                                        
                                                         61
                                                    
                                                
                                            
                                        
 
                                       
                                            
                                                
                                            
                                            
                                                
                                                    【古典音乐】詹姆斯·高威《季节》1993[WAV+
                                                
                                                
                                                    
                                                        2024/12/28
                                                        
                                                         24
                                                    
                                                
                                            
                                        
 
                                       
                                            
                                                
                                            
                                            
                                                
                                                    贝拉芳蒂《卡里普索之王》SACD[WAV+CUE]
                                                
                                                
                                                    
                                                        2024/12/28
                                                        
                                                         74
                                                    
                                                
                                            
                                        


                                    
                                
                            
                            一句话新闻
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/12/28

3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。

苹果官方表示：

在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。

探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。

Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。
更新动态

2024年12月28日
基于javascript的无缝滚动动画1

javascript无缝滚动,javascript滚动

JavaScript实现多文件下载方法解析

vue-router重写push方法,解决相同路径跳转报错问题

评论“基于javascript的无缝滚动动画1”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新动态

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存
