//scrollBodyId: String 内部滚动div的id
//scrollBoxId: String 外面限制div的id
//showHeight: Int 限制显示高度
//showWidth: Int 限制显示宽度
//lineHeight: Int 每行的高度
//stopTime: Int 间隔停止的时间(毫秒)
//speed: Int 滚动速度(毫秒,越小越快)
var ScrollObj = function(scrollBodyId,scrollBoxId,showHeight,showWidth,lineHeight,stopTime,speed) {
this.obj = document.getElementById(scrollBodyId);
this.box = document.getElementById(scrollBoxId);
this.style = this.obj.style;
this.defaultHeight = this.obj.offsetHeight;
this.obj.innerHTML += this.obj.innerHTML;
this.obj.style.position = "relative";
this.box.style.height = showHeight;
this.box.style.width = showWidth;
this.box.style.overflow = "hidden";
this.scrollUp = doScrollUp;
this.stopScroll = false;
this.curLineHeight = 0;
this.lineHeight = lineHeight;
this.curStopTime = 0;
this.stopTime = stopTime;
this.speed = speed;
this.style.top = lineHeight;
this.object = scrollBodyId + "Object";
eval(this.object + "=this");
setInterval(this.object+".scrollUp()",speed);
this.obj.onmouseover=new Function(this.object+".stopScroll=true");
this.obj.onmouseout=new Function(this.object+".stopScroll=false");
}
function doScrollUp(){
if( this.stopScroll == true )
return;
this.curLineHeight += 1;
if( this.curLineHeight >= this.lineHeight ){
this.curStopTime += 1;
if( this.curStopTime >= this.stopTime ){
this.curLineHeight = 0;
this.curStopTime = 0;
}
}
else{
this.style.top = parseInt(this.style.top) - 1;
if( -parseInt(this.style.top) >= this.defaultHeight ){
this.style.top = 0;
}
}
}
分享到:
相关推荐
在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...
在本场景中,"js文字滚动插件制作新闻公告列表scroll文字间歇滚动"涉及到的核心技术是利用JS实现文字滚动效果,这通常用于展示新闻公告列表,以有限的空间显示更多的内容。以下将详细讲解如何制作这样的插件以及涉及...
本篇文章将深入探讨如何利用JavaScript实现文字滚动效果,并提供相关的源码示例。 文字滚动效果通常分为两种类型:向上滚动和向下滚动。这种效果常用于新闻滚动、公告栏或者页眉信息展示。在JavaScript中,可以使用...
在本主题中,我们关注的是"js文字滚动插件",这是一种用JavaScript实现的特效,能够让文本在网页上按照预设的方式自动滚动,如向上或向下间歇滚动,常用于展示新闻公告列表。 制作一个js文字滚动插件,首先要理解...
总的来说,使用JavaScript实现单行文字滚动是一个基础但实用的技巧,它可以让你的网页更加生动有趣。这个过程中涉及的关键知识点包括:DOM操作、事件循环、动画帧的处理以及原生JavaScript方法的运用。理解并掌握...
在这个“js文字滚动(IE火狐兼容版)”中,我们主要探讨的是如何利用JavaScript来创建一个在不同浏览器上都能正常运行的文字滚动效果,包括Internet Explorer(IE)和Firefox等主流浏览器。 文字滚动是一种常见的网页...
本项目名为“js文字滚动一次一行特效”,它利用HTML、CSS和JavaScript技术实现了类似抽奖公告的文字滚动效果,使得信息以逐行滚动的方式呈现,既具有视觉吸引力,又便于用户阅读。 首先,我们要理解HTML在这个效果...
本文将深入探讨如何使用JavaScript(简称js)来创建一个双行关联的向上文字滚动效果,以及如何实现多组文字滚动列表。我们将通过分析标题、描述以及提供的资源文件名来讲解这一技术。 首先,我们要理解“js文字滚动...
JavaScript文字滚动是一种常见的网页动态效果,它可以使文本在页面上以滚动的方式显示,常用于新闻更新、公告栏或者页面的标题展示。这种效果是通过JavaScript编程实现的,它可以为网页增添交互性和动感,吸引用户的...
在jQuery中实现文字滚动,可以使用`slideUp`、`slideDown`、`slideToggle`等动画函数,以及`append`、`prepend`等元素操作函数。 1. 上下滚动:通过设定定时器,不断将文本元素移入或移出视区,实现上下滚动的效果...
总的来说,制作一个“js文字滚动插件制作双行关联向上文字间歇滚动”涉及到JavaScript基础、DOM操作、动画处理、浏览器兼容性和插件设计等多个方面。通过深入理解这些知识点,并结合实际项目需求,我们可以构建出一...
JavaScript是一种广泛用于网页动态效果的编程语言,尤其在创建文字滚动效果方面表现出色。滚动新闻是网站中常见的功能,它可以吸引用户的注意力并有效地传递信息。本文将深入探讨如何使用JavaScript实现文字滚动效果...
"文字左右无缝滚动JS"是一个实现这种效果的技术,它不同于HTML的原生`<MARQUEE>`标签,后者虽然简单但功能有限且已被废弃。通过JS实现的文字滚动效果可以更加灵活、可控,同时提供更好的用户体验。 首先,我们需要...
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用,主要用于创建一种视觉上连续、无中断的文字滚动展示,常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息,而不会显得拥挤。...
在网页设计中,文字滚动通常通过JavaScript库或者CSS3动画来实现。根据提供的压缩包中的文件名"jquery-text-141209200544",我们可以推测这个特效是基于jQuery库构建的。jQuery是一个广泛使用的JavaScript库,它简化...
5. **JavaScript逻辑**:编写JavaScript函数来处理滚动逻辑,包括计算滚动速度、方向、何时重置位置等。可能需要考虑到浏览器兼容性和性能优化。 6. **事件监听**:如果需要,还可以添加事件监听器,比如当用户暂停...
在本场景中,"js单行文字滚动公告"是一个常见的网页元素,它能够以滚动的形式显示公告信息,适用于网站的新闻更新、通知或者活动宣传等。这种效果可以使页面更加生动,吸引用户的注意力。 实现单行文字滚动公告主要...
在IT行业中,"跑马灯文字滚动"是一种常见的视觉效果,尤其在电子显示屏、网站、APP界面设计中经常被用到。它通过让文字或信息像霓虹灯一样连续滚动,来展示大量的信息或者吸引用户的注意力。这个效果通常用于有限的...
总结来说,通过JS+Div实现文字滚动和图片切换,主要涉及到JavaScript事件处理、DOM操作、CSS布局和样式控制。理解这些基本概念和技术,开发者可以根据需求创建各种动态效果,提升网页的视觉吸引力和用户体验。在实际...