貌似以下内容还有个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>
分享到:
相关推荐
4. **JS特效**:为了实现无缝,我们需要在滚动到最后一项后,将第一个项目移动到最后,形成一个视觉上的无缝循环。这通常通过JavaScript的逻辑判断和DOM操作来完成。例如,当最后一个项目的顶部达到可见区域的底部时...
由于提供的标签中没有具体的插件名称,这里假设我们使用的是一个通用的无缝滚动插件,它可能包含的核心代码结构如下: 1. 初始化插件: ```javascript $(document).ready(function() { $('.slider')....
标题 "通用不间断滚动JS封装类" 提供了一个关键线索,那就是关于JavaScript的封装技术,特别是针对不间断滚动效果的实现。这种效果通常用于新闻滚动、广告轮播或任何需要连续滚动内容的网页元素。封装类是一种将功能...
标题“MFC 通用自绘滚动条”暗示了这个压缩包可能包含一个或多个C++源代码文件,这些文件提供了一个自定义的滚动条类,可以应用于各种控件,如EDIT、LISTBOX、CTRLLISTBOX等。自绘滚动条的实现通常涉及以下关键知识...
本篇将详细介绍一个通用的JavaScript滚动效果类,它具有方向、时间、延时和速度设置等功能。 1. **滚动方向**:在JavaScript中,我们可以控制滚动条向上、向下、向左或向右滚动。通过设置CSS样式和JavaScript逻辑,...
在本文中,我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式,常用于网站中展示不断滚动的信息,如新闻标题或广告。然而,HTML5 中的原生 `marquee` ...
在本例中,它专注于创建一个通用的、不间断的滚动效果,这可以用于任何需要滚动展示的内容,如新闻滚动条、滚动广告或者滚动菜单等。 三、JS封装与模块化 JS封装是将代码组织成可重用的函数或类,以提高代码的可...
通用的图片滚动js类,可以支持多种滚动风格
Marquee Scroll通用不间断滚动JS封装类...总的来说,Marquee Scroll通用不间断滚动JS封装类是一个用于实现网页元素自动滚动的高效工具,通过合理封装和配置,开发者可以轻松地在项目中应用各种滚动效果,提高开发效率。
总的来说,这个压缩包中的资源可能包含了一个完整的JavaScript类,这个类提供了创建文字图片不间断滚动效果的功能,而且比传统的Marquee标签更加灵活、高效,并具备更好的可维护性和可扩展性。开发人员可以方便地...
1. **`GetObj(objName)`**:这是一个通用的DOM元素获取函数,兼容IE和非IE浏览器,通过传入元素ID返回对应的DOM对象。 2. **`AutoPlay()`**:该函数用于设置自动向下滚动的定时器,每隔2000毫秒调用一次`ISL_GoDown...
"电影胶片循环滚动-通用版.7z" 是一个压缩包文件,其中包含了实现这种效果的相关资源或代码,可能是图片序列、动画素材或者软件工具。 首先,我们要理解7z文件格式。7z是一种高压缩比的文件存档格式,由7-Zip软件...
一个通用的客服滚 动JS代码、适合初学者,有注释
"Class Of Marquee Scroll通用不间断滚动JS封装类"是一个专门设计的JS库,它提供了一种简便的方法来实现这种效果。 这个库的核心在于它的封装性。封装意味着开发者无需深入理解复杂的JS滚动逻辑,只需调用预定义的...
AS3.0+xml通用图片滚动是一个使用Adobe ActionScript 3.0编程语言和XML数据格式实现的图片轮播组件。这个组件适用于网页、Flash应用程序或其他需要动态展示多张图片的场景。以下是关于这个主题的详细知识点: 1. **...
通过`setInterval`函数创建了一个定时器,每隔speed毫秒执行一次Marquee函数,以实现连续的滚动效果。同时,通过`rule.onmouseover`和`rule.onmouseout`事件监听器,实现了当鼠标悬浮在滚动区域时暂停滚动(清除...
本项目名为“滚屏(图片不间断滚动)通用不间断滚动JS封装类”,旨在实现一种适用于图片的不间断滚动效果,使得图片能够在页面上连续、平滑地滚动,提升用户体验。以下将详细介绍该技术的核心知识点及其应用。 一、...
开发者可能需要创建一个包含多个子元素(图片)的容器,并控制这个容器在两个维度上的位置变化,以达到横竖双向滚动的视觉效果。 4. **无缝隙滚动**:无缝滚动是让滚动内容在到达终点后立即从起点重新开始,让用户...
这个"可调字体和颜色的通用文本滚动显示类"是一个软件组件,专为实现这一功能而设计。下面将详细介绍这个类的可能特点和实现原理。 首先,此类的核心功能是动态滚动显示文本。它可能使用了一种叫做“文本缓冲区”的...