`

javascript实现文字列表无缝向上滚动

 
阅读更多

转自:http://www.codefans.net/jscss/code/1639.shtml

实际的应用中demo中的元素会有宽度的样式所以我总是出现了 scrollTop总是小于OffsetTop 的现象。也就是demo2到demo最顶的高度总是大于滚动条可以到的最大高度,所以不会进入if语句,我这里修改之后在我的项目中可以使用了。^_^

<body>
<div id="demo" style="overflow:hidden;height:80px;width:280px;">
<ul id="demo1">  
	<li><a href="/soft/4085.shtml" target="_blank">XP Menu 仿QQ菜单管理器左侧菜单</a></li>
	<li><a href="/soft/5884.shtml" target="_blank">多层嵌套的一个层展开</a></li>
	<li><a href="/soft/1852.shtml" target="_blank">《Java2核心技术卷2:高级特性》第7版</a></li>
	<li><a href="/soft/1286.shtml" target="_blank">CSS、HTML教程打包下载 (CHM)</a></li>
	<li><a href="/soft/4216.shtml" target="_blank">《C++ Primer》中文第四版 chm</a></li>
	<li><a href="/soft/3388.shtml" target="_blank">C++工资管理系统(Access)</a></li>
	<li><a href="/soft/2009.shtml" target="_blank">非常牛的左侧栏JS折叠菜单</a></li>
</ul> 
<div id="demo2"></div>
</div> 
<script> 
var speed=40; 
var demo=document.getElementById("demo"); 
var demo2=document.getElementById("demo2"); 
var demo1=document.getElementById("demo1");
demo2.innerHTML = demo1.innerHTML; 
var demoMaxOffsetTop = demo.scrollHeight-demo.offsetHeight;//demo的最大scrollTop
function Marquee(){
if(demoMaxOffsetTop - demo.scrollTop<=0) { 
 demo.scrollTop-=demo1.offsetHeight;
}
else{ 
 demo.scrollTop++;
} 
} 
var MyMar=setInterval(Marquee,speed); 
demo.onmouseover=function() {clearInterval(MyMar);} 
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);} 
</script> </body>


对scollTop,offsetTop,offsetHeight的理解:

转自 http://www.cnblogs.com/borthers11/articles/566243.html

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

1.offsetTop :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

4.offsetHeight:
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

2.offsetLeft :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

5.offsetParent :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

6.scrollLeft :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.

分享到:
评论

相关推荐

    文字列表无缝向上滚动

    总的来说,“文字列表无缝向上滚动”是一种结合了JavaScript和CSS的动态网页设计技巧,它可以提升网页的互动性和视觉吸引力。通过理解并应用这些技术,开发者可以创建出更加生动、吸引人的网页内容。

    文字列表无缝向上滚动JavaScript代码

    文字列表无缝向上滚动JavaScript代码,原来的文件上传错了,下错的朋友可以下这个!

    js实现文字内容无缝滚动动画效果

    "js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用,主要用于创建一种视觉上连续、无中断的文字滚动展示,常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息,而不会显得拥挤。...

    jQuery排名文字无缝循环向上滚动代码

    总结起来,实现“jQuery排名文字无缝循环向上滚动代码”主要涉及HTML结构的搭建、CSS样式的设置以及JavaScript(尤其是jQuery库)的运用。通过合理组合这三个部分,我们可以创建一个具有暂停功能的动态滚动文字列表...

    文字向上无缝滚动

    标题“文字向上无缝滚动”指的是在编程中实现一种文本滚动效果,这种效果使得文字能够不断地、没有缝隙地从屏幕底部向上滚动,常用于新闻滚动、信息展示等场景。这种技术通常涉及前端开发,特别是HTML、CSS和...

    无缝向上滚动文字代码兼容各种浏览器

    首先,无缝向上滚动的文字特效通常基于JavaScript和CSS实现。JavaScript负责动态改变文本的位置,实现滚动效果,而CSS则用于设置文本样式和容器布局。在JavaScript中,可以使用定时器(如`setInterval`)配合数组或...

    无缝向上滚动(图片文字效果)

    在网页设计中,"无缝向上滚动(图片文字效果)"是一种流行且吸引用户注意力的动态展示方式。这种技术主要用于创建连续、平滑的滚动动画,让图像和文字以优雅的方式在页面上移动,从而增强用户体验并提升网站的视觉...

    原生js scrolltext无缝滚动插件带按钮控制文字向上无缝滚动

    在这个场景中,我们讨论的是一个原生JavaScript实现的"scrolltext"插件,它提供了文字向上无缝滚动的功能,并且还配备了按钮控制,使得用户可以自由地操作滚动速度和方向。这个插件对于动态展示大量文本信息,如公告...

    jquery文字上下无缝滚动

    使用jQuery实现文字上下无缝滚动,可以大大减少开发时间和代码量。 **实现步骤:** 1. **引入jQuery库**:首先,确保在HTML文档中引入jQuery库。通常,我们通过CDN链接引入,例如: ```html ...

    js实现文字无缝向上滚动

    标题“js实现文字无缝向上滚动”意味着文章将介绍如何使用JavaScript(js)实现网页上文字内容的无缝向上滚动效果。描述部分提到,文章提供了一个示例代码,而标签“js文字无缝向上滚动 文字向上无缝滚动 js 无缝...

    jQuery文字和图片两种无缝向上滚动

    "jQuery文字和图片两种无缝向上滚动"是一个常见的交互式设计技术,广泛应用于新闻网站、产品展示页面等,为用户提供连续、平滑的视觉体验。这个技术结合了jQuery库的优势,实现了文字和图片在页面上不间断地向上滚动...

    基于JS实现新闻列表无缝向上滚动实例代码

    通过上述分析,可以看出,实现一个基本的无缝向上滚动新闻列表,需要综合运用HTML、CSS以及JavaScript的基本知识,此外还包括一些细节的处理,比如定时器的使用,事件监听等。掌握了这些知识点,开发者可以更加灵活...

    jQuery文字和图片两种无缝向上滚动.zip

    总结来说,jQuery实现文字和图片无缝向上滚动涉及以下几个核心步骤: 1. 设置HTML结构,包含需要滚动的元素。 2. 编写jQuery代码,定义滚动逻辑,包括定时器、动画方法和边界条件处理。 3. 调整CSS样式,保证元素...

    jQuery排名文字无缝循环向上滚动代码.zip

    使用这个代码示例,开发者不仅可以快速实现文字向上滚动的效果,还能通过学习和修改源码,提升对jQuery和CSS动画的理解。对于初学者,这是一个很好的实践项目;对于有经验的开发者,它可以作为快速集成滚动效果的...

    简单原生js文字向上滚动消息框代码

    这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...

    基于javascript实现文字无缝滚动效果

    在本示例中,我们将深入探讨如何使用JavaScript实现文字无缝滚动效果,这是一种常见的网页动态效果,常用于新闻滚动、公告显示等场景。 首先,我们需要理解基本的HTML和CSS结构。在提供的代码中,我们看到一个`...

    table表单无缝连接滚动

    JavaScript是实现无缝滚动的核心,它负责检测用户滚动事件,判断是否接近表格底部,如果满足条件,则通过Ajax请求加载新的数据。Ajax允许在后台与服务器通信,无需刷新整个页面,提高交互性。 ### 5. 数据分块与懒...

    用CSS3实现无限循环的无缝滚动的实例代码

    接着,使用setInterval定时器来周期性地向上滚动父级容器,当滚动到数据高度的距离等于原数据高度时,将滚动位置重置为0,从而实现无缝的循环滚动。这种方法适用于数据量固定且在前端已知的情况。 而在使用CSS3来...

    jquery无缝向上滚动实现代码教程共29页.pdf.zi

    本教程将详细讲解如何利用jQuery实现无缝向上滚动的效果,这通常用于网页上的轮播图或者新闻滚动展示,给用户带来流畅的浏览体验。 无缝向上滚动是一种常见的网页动态效果,它允许内容在页面顶部到达时继续向下滚动...

Global site tag (gtag.js) - Google Analytics