`

连续不间断仿marquee滚动

阅读更多

利用javascript+css+dom实现的仿marquee滚动功能,不过比marquee更完善,可以连续不间断的滚动

<div id="scroll_logo"style="OVERFLOW: hidden; HEIGHT: 50px">
<div id="scroll_logo1">
滚动内容
</div>
<div id="scroll_logo2"></div>
</div>

/*向上滚动*/
<script>
var speed=65
scroll_logo2.innerHTML=scroll_logo1.innerHTML
function Marquee3()
 {
  if(scroll_logo2.offsetTop-scroll_logo.scrollTop<=0)
  {
    scroll_logo.scrollTop-=scroll_logo1.offsetHeight
  }else{
    scroll_logo.scrollTop++
  }
}
var MyMar2=setInterval(Marquee3,speed)
scroll_logo.onmouseover=function() {clearInterval(MyMar2)}
scroll_logo.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
</script>  

/*向左滚动*/
var speed=65
scroll_logo2.innerHTML=scroll_logo1.innerHTML
function Marquee3()
 {
  if(scroll_logo2.offsetWidth-scroll_logo.scrollLeft<=0)
  {
    scroll_logo.scrollLeft-=scroll_logo1.offsetWidth
  }else{
    scroll_logo.scrollLeft++
  }
}
var MyMar2=setInterval(Marquee3,speed)
scroll_logo.onmouseover=function() {clearInterval(MyMar2)}
scroll_logo.onmouseout=function() {MyMar2=setInterval(Marquee3,speed)}
</script>  

分享到:
评论

相关推荐

    jQuery 模拟 Marquee 无缝滚动 不间断滚动

    Marquee 效果是传统 HTML 中的一种标签,用于实现文本或图像的不间断滚动,但在现代 web 开发中,我们通常使用 jQuery 来模拟这种效果,因为它提供了更大的灵活性和控制力。本文将深入探讨如何使用 jQuery 创建一个...

    jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动

    在网页设计中,有时我们需要创建一个类似电视新闻滚动条的效果,让文字或图片能够不间断地滚动显示。在HTML5时代,我们可以利用JavaScript库如jQuery来实现这样的效果,尤其是模仿传统的Marquee标签,但更加灵活且可...

    不间断 滚动图片 滚动文字

    在IT行业中,"不间断滚动图片"和"滚动文字"是一种常见的网页动态效果,常用于新闻网站、广告展示或产品介绍等场景。这种效果能够吸引用户的注意力,提高信息的传播效率。接下来,我们将深入探讨实现这些效果的技术...

    推荐通用文字图片JS不间断滚动封装类 代替Marquee

    标题提到的"推荐通用文字图片JS不间断滚动封装类 代替Marquee",就是一种利用JavaScript实现的动态效果,它旨在为文字和图片提供一种类似传统的Marquee(滚动条)效果,但更加灵活且易于使用的解决方案。Marquee是...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装

    本文将详细讨论“MSClass Class Of Marquee Scroll通用不间断滚动JS封装”这一主题,这是一种利用JavaScript实现的滚动效果,旨在为网页元素提供无缝、连续的滚动动画。 一、Marquee效果简介 Marquee效果源自HTML4...

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\

    《MSClass:构建高效不间断滚动效果的JS封装类》 在网页设计中,动态滚动效果是一种常见的视觉表现手法,能够吸引用户的注意力并增加交互性。本文将深入探讨一个名为"MSClass"的JavaScript封装类,它专为实现各种...

    JS实现图片的不间断连续滚动

    【JS实现图片不间断连续滚动】 在网页设计中,经常需要创建动态效果来吸引用户的注意力,其中图片的连续滚动是一种常见的手法。传统的HTML标签`&lt;marquee&gt;`可以实现滚动效果,但对图片的处理并不理想,会出现明显的...

    JS图片不间断四向滚动代码

    本篇文章将详细介绍一种基于JavaScript实现的图片不间断四向滚动效果,即可以让图片在页面上、下、左、右四个方向连续滚动的技术。这种效果不仅适用于广告展示、轮播图等场景,还能为网站增添活力,吸引用户注意力。...

    通用不间断滚动JS封装类

    标题 "通用不间断滚动JS封装类" 提供了一个关键线索,那就是关于JavaScript的封装技术,特别是针对不间断滚动效果的实现。这种效果通常用于新闻滚动、广告轮播或任何需要连续滚动内容的网页元素。封装类是一种将功能...

    实现连续滚动文字效果,无间断

    根据给定文件的信息,本文将详细介绍如何实现网页上连续滚动的文字效果,并确保其无间断地展示。在实际开发过程中,这种效果常用于新闻滚动、公告栏等场景,能够有效地吸引用户注意力并传达重要信息。 ### 实现原理...

    JS无间隔滚动代码,javascript,marquee

    这种滚动技术使得文本或图片能够不间断地在网页上自动滚动,给用户带来动态视觉体验。在HTML5时代,虽然CSS3提供了许多动画效果,但JavaScript仍然在实现自定义滚动行为时具有极大的灵活性。 "marquee"标签是HTML4...

    不间断滚动图片JS代码

    在网页设计中,动态效果是吸引用户注意力的重要手段之一,其中不间断滚动图片的效果更是常见,尤其适用于展示产品、新闻更新或者广告。这个“不间断滚动图片JS代码”正是为实现这样的功能而设计的。 首先,我们要...

    再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)

    1. **文字滚动不准确**:这是1.6版本主要解决的一个bug,感谢周珺参与测试,确保了滚动的准确性。 2. **鼠标悬停改变滚动方向**:在1.4版本中,鼠标悬停可以控制左右滚动,增加了交互性。 3. **文档下载速度导致的...

    js图片不间断滚动代码

    其中,“js图片不间断滚动代码”是一种常见且实用的功能,它可以让一系列图片在页面上自动连续滚动展示,不仅能够吸引用户注意力,还能有效地节省空间,提高页面美观度。 #### 一、基本原理与实现步骤 1. **创建...

    Class Of Marquee Scroll通用不间断滚动JS封装类第1/2页

    《Class Of Marquee Scroll通用不间断滚动JS封装类》是一个JavaScript库,主要用于实现网页中的不间断滚动效果,支持多种滚动方向和自定义配置。该库最早在2006年发布,经过多次更新和优化,提高了其功能性和兼容性...

    不间断跑马灯效果,非常棒

    “不间断跑马灯效果”是一种常用于网站中的动态展示技术,其特点在于能够实现文本或图像的连续滚动显示,以此来吸引用户的注意力或者传递信息。这种效果常见于网站的横幅广告、新闻滚动条等位置。本文将通过分析提供...

    js代码 无缝滚动效果

    无缝滚动是一种网页元素展示方式,通过JavaScript来控制内容如图片、文字等以循环、不间断的方式移动,模拟出一种无边界的滚动效果。这种效果在许多现代网站设计中被广泛采用,可以提高用户体验,吸引用户的注意力。...

    JS实现图片的不间断连续滚动的简单实例

    标题中提到的知识点是使用JavaScript(JS)来实现图片的不间断连续滚动效果。在描述中作者表示将分享一个简单的实例,并认为这个实例值得一观。标签中指出这个实例将使用JS来实现图片的不间断连续滚动。 在提供的...

Global site tag (gtag.js) - Google Analytics