软件开发培训班 >> 编程开发 >> JavaScript

js 上下文字滚动效果

　　本文标签：上下文字,滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>test</title> 
<style type="text/css"> 
#textHeight{line-height:25px; height:25px; overflow:hidden; width:150px; font-size:12px; border:solid 1px #666;} 
</style> 
<script language="javascript" type="text/javascript"> 
function ScrollText(content){ 
this.Delay=10; 
this.Amount=1; 
this.Direction="up"; 
this.Timeout=1000; 
this.ScrollContent=this.gid(content); 
this.ScrollContent.innerHTML += this.ScrollContent.innerHTML; 
this.ScrollContent.onmouseover = this.GetFunction(this,"Stop"); 
this.ScrollContent.onmouseout = this.GetFunction(this,"Start"); 
}

ScrollText.prototype.gid=function(element){ 
return document.getElementById(element); 
} 
ScrollText.prototype.Stop=function(){ 
clearTimeout(this.AutoScrollTimer); 
clearTimeout(this.ScrollTimer); 
} 
ScrollText.prototype.Start=function(){ 
clearTimeout(this.AutoScrollTimer); 
this.AutoScrollTimer=setTimeout(this.GetFunction(this,"AutoScroll"),this.Timeout); 
}

ScrollText.prototype.AutoScroll=function(){ 
if(this.Direction=="up"){ 
if(parseInt(this.ScrollContent.scrollTop)>=parseInt(this.ScrollContent.scrollHeight)/2){ 
this.ScrollContent.scrollTop=0; 
clearTimeout(this.AutoScrollTimer); 
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); 
return; 
} 
this.ScrollContent.scrollTop += this.Amount; 
}else 
{ 
if(parseInt(this.ScrollContent.scrollTop) <= 0) 
{ 
this.ScrollContent.scrollTop = parseInt(this.ScrollContent.scrollHeight) / 2; 
} 
this.ScrollContent.scrollTop -= this.Amount; 
} 
if(parseInt(this.ScrollContent.scrollTop) % this.LineHeight != 0) 
{ 
this.ScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Delay); 
} 
else 
{ 
this.AutoScrollTimer = setTimeout(this.GetFunction(this,"AutoScroll"), this.Timeout); 
} 
}

ScrollText.prototype.GetFunction=function(variable,method){ 
return function() 
{ 
variable[method](); 
} 
} 
</script> 
</head>

<body> 
<div id="textHeight" title="xx"> 
博客园 <span> | </span> 
脚本之家 <span> | </span> 
csdn <span> | </span> 
蓝色理想 <span> | </span> 
51js <span> | </span> 
</div> 
<script> 
var scrollup = new ScrollText("textHeight"); 
scrollup.Start(); 
</script> 
</body> 
</html>

技术文章快速查找

firefox下jquery iframe刷新页面提示会导致重复之前动作

非常棒的10款jQuery 幻灯片插件

Jquery插件 easyUI属性汇总

关于JavaScript中name的意义冲突示例介绍

JavaScript高级程序设计阅读笔记（十三） js定义类或对象

javascript 带有滚动条的表格,标题固定,带排序功能.

JS 判断代码全收集

写的一段拖动对象的代码

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建