`
soleares
  • 浏览: 14720 次
  • 性别: Icon_minigender_1
  • 来自: 天津
最近访客 更多访客>>
社区版块
存档分类
最新评论

文字滚动的js函数

    博客分类:
  • AJAX
 
阅读更多
//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单排文字滚动向上间歇滚动

    在这个场景中,"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果,它可以使页面上的文本按照设定的方向(如...

    js文字滚动插件制作新闻公告列表scroll文字间歇滚动

    在本场景中,"js文字滚动插件制作新闻公告列表scroll文字间歇滚动"涉及到的核心技术是利用JS实现文字滚动效果,这通常用于展示新闻公告列表,以有限的空间显示更多的内容。以下将详细讲解如何制作这样的插件以及涉及...

    js 文字滚动效果

    本篇文章将深入探讨如何利用JavaScript实现文字滚动效果,并提供相关的源码示例。 文字滚动效果通常分为两种类型:向上滚动和向下滚动。这种效果常用于新闻滚动、公告栏或者页眉信息展示。在JavaScript中,可以使用...

    js文字滚动插件

    在本主题中,我们关注的是"js文字滚动插件",这是一种用JavaScript实现的特效,能够让文本在网页上按照预设的方式自动滚动,如向上或向下间歇滚动,常用于展示新闻公告列表。 制作一个js文字滚动插件,首先要理解...

    js实现单行文字滚动

    总的来说,使用JavaScript实现单行文字滚动是一个基础但实用的技巧,它可以让你的网页更加生动有趣。这个过程中涉及的关键知识点包括:DOM操作、事件循环、动画帧的处理以及原生JavaScript方法的运用。理解并掌握...

    js文字滚动(IE火狐兼容版)

    在这个“js文字滚动(IE火狐兼容版)”中,我们主要探讨的是如何利用JavaScript来创建一个在不同浏览器上都能正常运行的文字滚动效果,包括Internet Explorer(IE)和Firefox等主流浏览器。 文字滚动是一种常见的网页...

    js文字滚动一次一行特效,类似抽奖公告

    本项目名为“js文字滚动一次一行特效”,它利用HTML、CSS和JavaScript技术实现了类似抽奖公告的文字滚动效果,使得信息以逐行滚动的方式呈现,既具有视觉吸引力,又便于用户阅读。 首先,我们要理解HTML在这个效果...

    js文字滚动插件制作双行关联向上文字间隙滚动

    本文将深入探讨如何使用JavaScript(简称js)来创建一个双行关联的向上文字滚动效果,以及如何实现多组文字滚动列表。我们将通过分析标题、描述以及提供的资源文件名来讲解这一技术。 首先,我们要理解“js文字滚动...

    javascript文字滚动案例

    JavaScript文字滚动是一种常见的网页动态效果,它可以使文本在页面上以滚动的方式显示,常用于新闻更新、公告栏或者页面的标题展示。这种效果是通过JavaScript编程实现的,它可以为网页增添交互性和动感,吸引用户的...

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

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

    文字滚动的几种实现,jquery,js

    在jQuery中实现文字滚动,可以使用`slideUp`、`slideDown`、`slideToggle`等动画函数,以及`append`、`prepend`等元素操作函数。 1. 上下滚动:通过设定定时器,不断将文本元素移入或移出视区,实现上下滚动的效果...

    js文字滚动插件制作双行关联向上文字间歇滚动

    总的来说,制作一个“js文字滚动插件制作双行关联向上文字间歇滚动”涉及到JavaScript基础、DOM操作、动画处理、浏览器兼容性和插件设计等多个方面。通过深入理解这些知识点,并结合实际项目需求,我们可以构建出一...

    几种js文字滚动(滚动 新闻)代码共享

    JavaScript是一种广泛用于网页动态效果的编程语言,尤其在创建文字滚动效果方面表现出色。滚动新闻是网站中常见的功能,它可以吸引用户的注意力并有效地传递信息。本文将深入探讨如何使用JavaScript实现文字滚动效果...

    文字左右无缝滚动JS(前端技术分享)

    "文字左右无缝滚动JS"是一个实现这种效果的技术,它不同于HTML的原生`<MARQUEE>`标签,后者虽然简单但功能有限且已被废弃。通过JS实现的文字滚动效果可以更加灵活、可控,同时提供更好的用户体验。 首先,我们需要...

    文字滚动一次一行特效.zip

    在网页设计中,文字滚动通常通过JavaScript库或者CSS3动画来实现。根据提供的压缩包中的文件名"jquery-text-141209200544",我们可以推测这个特效是基于jQuery库构建的。jQuery是一个广泛使用的JavaScript库,它简化...

    js 文字横向滚动

    5. **JavaScript逻辑**:编写JavaScript函数来处理滚动逻辑,包括计算滚动速度、方向、何时重置位置等。可能需要考虑到浏览器兼容性和性能优化。 6. **事件监听**:如果需要,还可以添加事件监听器,比如当用户暂停...

    js单行文字滚动公告

    在本场景中,"js单行文字滚动公告"是一个常见的网页元素,它能够以滚动的形式显示公告信息,适用于网站的新闻更新、通知或者活动宣传等。这种效果可以使页面更加生动,吸引用户的注意力。 实现单行文字滚动公告主要...

    跑马灯文字滚动

    在IT行业中,"跑马灯文字滚动"是一种常见的视觉效果,尤其在电子显示屏、网站、APP界面设计中经常被用到。它通过让文字或信息像霓虹灯一样连续滚动,来展示大量的信息或者吸引用户的注意力。这个效果通常用于有限的...

    js+div实现文字滚动和图片切换效果代码.docx

    总结来说,通过JS+Div实现文字滚动和图片切换,主要涉及到JavaScript事件处理、DOM操作、CSS布局和样式控制。理解这些基本概念和技术,开发者可以根据需求创建各种动态效果,提升网页的视觉吸引力和用户体验。在实际...

Global site tag (gtag.js) - Google Analytics