`

比较通用的无缝滚动,真浪费空间,居然一个个写。。

 
阅读更多
貌似以下内容还有个bug  比如向上滚动的就应该是

  if (tab2.offsetTop - tab.offsetTop - tab.scrollTop <= 0)//还要减去外容器的上边接距离
            tab.scrollTop -= tab1.offsetHeight //demo跳到最顶端
才不会因为距离的计算失误导致滚动失败

另外:setInterval 真的挺卡的







先了解一下对象的几个的属性:

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动

程序代码

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向上滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>



图片下无缝滚动

程序代码

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
height: 100px;
text-align: center;
float: left;
}
#demo img {
border: 3px solid #F2F2F2;
display: block;
}
-->
</style>
向下滚动
<div id="demo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
tab.scrollTop=tab.scrollHeight
function Marquee(){
if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时
tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
else{
tab.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
-->
</script>



图片左无缝滚动

程序代码

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向左滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>



图片右无缝滚动

程序代码

<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
向右滚动
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10; //数字越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab.scrollLeft<=0)
tab.scrollLeft+=tab2.offsetWidth
else{
tab.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
分享到:
评论

相关推荐

    query图片无缝滚动插件上下左右图片无缝滚动代码.zip

    由于提供的标签中没有具体的插件名称,这里假设我们使用的是一个通用的无缝滚动插件,它可能包含的核心代码结构如下: 1. 初始化插件: ```javascript $(document).ready(function() { $('.slider')....

    通用不间断滚动JS封装类

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

    MFC 通用自绘滚动条

    标题“MFC 通用自绘滚动条”暗示了这个压缩包可能包含一个或多个C++源代码文件,这些文件提供了一个自定义的滚动条类,可以应用于各种控件,如EDIT、LISTBOX、CTRLLISTBOX等。自绘滚动条的实现通常涉及以下关键知识...

    通用不间断滚动JS封装类,代替Marquee

    在这个场景中,封装一个滚动类意味着将滚动逻辑、动画控制、用户交互处理等都集中在类的内部,对外提供简洁的接口供其他部分代码调用。 创建这样的通用滚动JS类通常包含以下几个关键步骤: 1. **初始化设置**:在...

    详解vue 自定义marquee无缝滚动组件

    在本文中,我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式,常用于网站中展示不断滚动的信息,如新闻标题或广告。然而,HTML5 中的原生 `marquee` ...

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

    在本例中,它专注于创建一个通用的、不间断的滚动效果,这可以用于任何需要滚动展示的内容,如新闻滚动条、滚动广告或者滚动菜单等。 三、JS封装与模块化 JS封装是将代码组织成可重用的函数或类,以提高代码的可...

    通用js滚动类

    通用的图片滚动js类,可以支持多种滚动风格

    Marquee Scroll通用不间断滚动JS封装类

    Marquee Scroll通用不间断滚动JS封装类...总的来说,Marquee Scroll通用不间断滚动JS封装类是一个用于实现网页元素自动滚动的高效工具,通过合理封装和配置,开发者可以轻松地在项目中应用各种滚动效果,提高开发效率。

    通用的JS滚动封装类!能够满足你所有的滚动开发需求!

    JavaScript滚动封装类是一种高效...总的来说,MSClass JavaScript滚动封装类是一个强大的工具,它简化了滚动效果的实现,同时提供了高度的定制性和灵活性,对于任何需要滚动效果的WEB项目来说都是一个值得考虑的选择。

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

    总的来说,这个压缩包中的资源可能包含了一个完整的JavaScript类,这个类提供了创建文字图片不间断滚动效果的功能,而且比传统的Marquee标签更加灵活、高效,并具备更好的可维护性和可扩展性。开发人员可以方便地...

    js左右滚动代码

    1. **`GetObj(objName)`**:这是一个通用的DOM元素获取函数,兼容IE和非IE浏览器,通过传入元素ID返回对应的DOM对象。 2. **`AutoPlay()`**:该函数用于设置自动向下滚动的定时器,每隔2000毫秒调用一次`ISL_GoDown...

    电影胶片循环滚动-通用版.7z

    "电影胶片循环滚动-通用版.7z" 是一个压缩包文件,其中包含了实现这种效果的相关资源或代码,可能是图片序列、动画素材或者软件工具。 首先,我们要理解7z文件格式。7z是一种高压缩比的文件存档格式,由7-Zip软件...

    JS 通用客服滚动

    一个通用的客服滚 动JS代码、适合初学者,有注释

    网页通用不间断滚动JS大全 简单实用

    "Class Of Marquee Scroll通用不间断滚动JS封装类"是一个专门设计的JS库,它提供了一种简便的方法来实现这种效果。 这个库的核心在于它的封装性。封装意味着开发者无需深入理解复杂的JS滚动逻辑,只需调用预定义的...

    js实现文字列表无缝滚动效果

    通过`setInterval`函数创建了一个定时器,每隔speed毫秒执行一次Marquee函数,以实现连续的滚动效果。同时,通过`rule.onmouseover`和`rule.onmouseout`事件监听器,实现了当鼠标悬浮在滚动区域时暂停滚动(清除...

    滚屏(图片不间断滚动)通用不间断滚动JS封装类

    本项目名为“滚屏(图片不间断滚动)通用不间断滚动JS封装类”,旨在实现一种适用于图片的不间断滚动效果,使得图片能够在页面上连续、平滑地滚动,提升用户体验。以下将详细介绍该技术的核心知识点及其应用。 一、...

    图片滚动,文字滚动,图片横竖滚动,超好的横竖同时无缝隙滚动代码,js,滚动特效

    开发者可能需要创建一个包含多个子元素(图片)的容器,并控制这个容器在两个维度上的位置变化,以达到横竖双向滚动的视觉效果。 4. **无缝隙滚动**:无缝滚动是让滚动内容在到达终点后立即从起点重新开始,让用户...

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

    标题中的"MSClass Class Of Marquee Scroll通用不间断滚动JS封装.zip"表明这是一个使用JavaScript实现的通用无缝滚动效果的代码库,特别适用于网页中的文本或图片滚动展示。这种滚动效果常见于新闻网站、广告横幅等...

    JavaScript实现垂直向上无缝滚动特效代码

    本例中使用了一个名为speed的变量来控制滚动速度,数值越小,滚动速度越快。 6. 实际的JavaScript代码:文中提到的JavaScript代码实现包括获取DOM元素、设置滚动速度以及通过定时器不断复制并替换层(dome1和dome2...

Global site tag (gtag.js) - Google Analytics