`

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代码

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

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

    3、通过层的滚动来实现文字滚动 三、源代码 &lt;html&gt; &lt;head&gt; &lt;title&gt;循环向上滚动的文字&lt;/title&gt; &lt;link href=css/scrollTop.css rel=stylesheet type=text/css /&gt; &lt;/head&gt; &lt;...

    html+css+javascript实现列表循环滚动示例代码

    说明:设置时间定时,在规定的时间内替换前一个节点的内容 1、关键代码:javascript: 复制代码代码如下: [removed] var dome=document.getElementById(“dome”); //获取节点 var dome1=document.getElementById...

    纯javascript实现四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: &lt;!DOCTYPE html&gt; &lt;!--[if lt IE 7 ]&gt; &lt;html lang="zh-CN" class="ie6"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7 ]&gt; &lt;html lang="zh-CN" class="ie7"&gt; &lt;![endif]--&...

    javascript特效无缝滚动marquee

    实现图片文字,向左,向右,向上,向下无缝滚动,适合广告图片展示 浏览器兼容(IE、FF、Opera、NS、MYIE)

    javascript实现无缝循环

    思路很简单,关键在css要写好。

    JavaScript实现图片无缝滚动效果

    图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的...

    JavaScript无缝滚动小例

    使用JavaScript写的无缝滚动例子,向上的向下的向左的向右的滚动都有,大家好好看看吧!

    向上无缝滚动

    无缝滚动,开发中必不可少的效果。希望能帮助您。

    Javascript实现信息滚动效果

    主要为大家详细介绍了Javascript实现信息滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    javascript经典效果示例

    58:___纯CSS代码实现的图片列表滚动 59:___纯CSS实现鼠标移上图片添加阴影效果 60:___经典的图片切换 61:___网站首页js幻灯片代码 62:___美化过的匀速图片滚动 63:___腾讯QQ网站的Js图片切换 64:___自写Js+CSS轮显...

    javascript完全学习手册1 源码

    14.1.1 文字向上不间断无缝滚动 387 14.1.2 灼热的文字(IE) 389 14.1.3 标题栏文字循环向左移动 391 14.1.4 各种形式输出文字 392 14.1.5 跑马灯式说明文字 398 14.1.6 跳动的文字 400 14.2 图片特效 402 14.2.1 ...

    JavaScript网页特效源代码

    带数字导航的横幅广告 无缝垂直向上滚动特效 漂浮广告 设为首页 收藏本站 屏蔽鼠标右键 源代码,效果图

    javascript完全学习手册2 源码

    14.1.1 文字向上不间断无缝滚动 14.1 12灼热的文字(IE) 14.1.3 标题栏文字循环向左移动 14.1.4 各种形式输出文字 14.1.5 跑马灯式说明文字 14.1.6 跳动的文字 14.2 图片特效 14.2.1 线性幻灯片 ...

    必会的常用javascript技术

    培训主要学习以下几个知识点: 1、制作带数字导航的横幅广告 2、实现无缝垂直向上滚动特效 3、实现漂浮广告 4、网页常用特效(实现加入收藏、设为首页和屏蔽右键功能

    react-table:具有无限滚动支持的React Table组件

    具有无限滚动支持的React Table组件 原料药 data: Array &lt; { } &gt; onScroll : Function onItemClick : ( item : Object ) =&gt; any onRemoveItems : ( items : Array &lt; Object &gt; ) = &gt; any / &gt;

    parallelRoll.js:无缝滚动

    无缝滚动方法,用前引入JQuery文件 html布局: 上一张 下一张 调用: $(document).ready(function() { $("#roll").parallelRoll({ boxName: "box", //最外层盒子类名 tagName: 'li', //滚动标签元素 time:...

    北大青鸟Javascript第8章在线培训作业参考

    2.在给出的“贵美网站首页”中实现对相应的特效。 (1)带数字导航的横幅广告 (2)无缝垂直向上滚动特效 (3)漂浮广告 (4)设为首页,收藏本站(仅ie有效) (5)屏蔽鼠标右键

Global site tag (gtag.js) - Google Analytics