`
insertyou
  • 浏览: 934804 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用JavaScript实现上下文字滚动特效

阅读更多

<script language=JavaScript>
var messages=new Array()
messages[0]="<font color=#8000FF>欢迎光临赛迪网电脑应用频道!</font></a>"
messages[1]="<font color=#FB2500>这里有织网梦工厂</font></a>"
messages[2]="<font color=#FF0066F>是网页初学者的学习园地</font></a>"
messages[3]="<font color=#FF9900>这里冲浪指南针</font></a>"
messages[4]="<font color=#00CC33>是网络爱好者天天必来充电的地方</font></a>"
messages[5]="<font color=#000000>这里有…………有精彩的内容等着你</font></a>"


var scrollerwidth=320
var scrollerheight=100
var scrollerbgcolor='#FFFFFF'
//下面的代码不要改动
if (messages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",3000)
setTimeout("move2(document.main.document.second)",3000)
return}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",100)}
else{
tlayer.top=scrollerheight
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++}}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",3000)
setTimeout("move1(document.main.document.first)",3000)
return}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",100)}
else{
tlayer2.top=scrollerheight
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++}}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){
tdiv.style.pixelTop=0
setTimeout("move3(tdiv)",3000)
setTimeout("move4(second2)",3000)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop-=5
setTimeout("move3(tdiv)",100)}
else{
tdiv.style.pixelTop=scrollerheight
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++}}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){
tdiv2.style.pixelTop=0
setTimeout("move4(tdiv2)",3000)
setTimeout("move3(first2)",3000)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop-=5
setTimeout("move4(second2)",100)}
else{
tdiv2.style.pixelTop=scrollerheight
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++}}
function startscroll(){
if (document.all){
move3(first2)
second2.style.top=scrollerheight}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top=scrollerheight+5
document.main.document.second.visibility='show'}}
window.onload=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight};
bgcolor=&{scrollerbgcolor};>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (document.all){
document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'
+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'
+scrollerheight+';clip:rect(0 '+scrollerwidth+' '
+scrollerheight+' 0);left:0;top:0">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0">')
document.write(messages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</span>')
}
</script>

分享到:
评论

相关推荐

    js实现文字上下滚动效果

    Javascript作为一种广泛使用的脚本语言,能够实现丰富的动态效果,包括本文要讨论的文字上下滚动效果。 要使用Javascript实现文字上下滚动效果,我们需要了解一些基础的Web技术,比如HTML、CSS和Javascript本身。...

    js+css3文字上下滚动切换动画特效

    在这个特效中,JavaScript主要负责控制文字的动态行为,例如定时切换文字内容,实现上下滚动的效果。你可以通过编写或引用特定的js脚本来定义文字滚动的频率、速度以及滚动方向等参数,使其符合设计需求。 接着,...

    css3文字上下滚动切换特效.zip

    在网页设计中,动态效果的运用能极大地提升用户体验,其中文字滚动切换特效就是一个常见的元素。本篇文章将详细解析"css3文字上下滚动切换特效",并探讨如何利用jQuery和CSS3实现这一功能。 一、CSS3基础与文本属性...

    jQuery Bootstrap响应式新闻列表文字上下滚动特效

    标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表,同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分,...

    JQUery实现上下循环滚动效果

    本教程将详细介绍如何利用jQuery这一强大的JavaScript库来实现文字或图片的上下循环滚动效果。 首先,我们需要理解jQuery的核心理念。jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画制作以及...

    文字上下滚动(走马灯效果)

    网上找到很多文字滚动,但都良莠不齐,基本都是左右滚动的,没有上下滚动。所以来分享一波 利用scortop实现文字移动,判断如果第一个元素的高度,如果小于等于了scrolltop(翻滚了多少高度)就把它删除并且添加到...

    js 上下文字滚动效果

    在网页设计中,为了增加页面的动态效果,提升用户体验,常常会使用JavaScript来实现各种特效,其中“上下文字滚动效果”是非常常见的一种。这种效果通常用于展示新闻滚动条、公告栏等场景。本文将详细介绍如何利用...

    一个jquery广告文字上下滚动效果

    标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...

    jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐

    接下来,编写jQuery代码来实现文字滚动效果。这里可以使用`animate()`函数来改变文本的`top`或`transform`属性,模拟文字的滚动。一个简单的实现方法是先将所有标题添加到一个看不见的容器,然后逐个将其移动到可视...

    javascript经典特效---文字滚动显示.rar

    在本主题"JavaScript经典特效---文字滚动显示"中,我们将深入探讨如何利用JavaScript实现文字在网页上的滚动显示效果,这一效果常见于新闻网站的标题滚动、公告栏等位置。 首先,实现文字滚动的基础是理解...

    jQuery上下间歇文字滚动.zip

    "jQuery上下间歇文字滚动"就是这样一款优秀的JavaScript特效,它为单排文字提供了一个圆滑、流畅的上下滚动展示方式,无需预先设定容器的高度,极大地提高了灵活性和适用性。下面我们将深入探讨这个特效的实现原理、...

    javascript经典特效---文字上下滚动的显示.rar

    在JavaScript的世界里,实现文字上下滚动的显示是一种常见的动态效果,尤其在早期网页设计中颇为流行。这种效果可以通过JavaScript的DOM操作和定时器功能来实现,使得文本在页面上不断滚动,为用户带来动态视觉体验...

    javascript经典特效---上下滚动的文字.rar

    这个压缩包文件"javascript经典特效---上下滚动的文字.rar"显然包含了实现这一效果的相关代码和资源。 上下滚动的文字特效通常是通过修改HTML元素的位置或内容来实现的,这种滚动可以是简单的垂直滚动,也可以是...

    jQuery实现的文字无缝上下滚动效果源码.zip

    在这个名为"jQuery实现的文字无缝上下滚动效果源码.zip"的压缩包中,包含了一个利用jQuery实现的文字滚动效果的源代码示例。 文字无缝上下滚动是一种常见的网页动态效果,常用于新闻更新、公告展示或者页面简介等...

    jquery 文字向上滚动

    7. **js**:这个目录可能包含了所有必要的JavaScript文件,包括jQuery库本身以及实现文字滚动效果的自定义脚本。 在实现jQuery文字向上滚动时,主要涉及的技术点可能包括: 1. **DOM操作**:jQuery提供了一系列方便...

    图文上下滚动切换的JavaScript特效包

    "图文上下滚动切换的JavaScript特效包"就是一种利用JavaScript技术来实现网页上图片和文字内容自动上下滚动展示的工具。这种特效可以提升用户体验,使得信息展示更加生动、吸引人。 在创建这种特效时,首先我们需要...

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

    本文将深入探讨“文字滚动的几种实现”,包括使用jQuery和JavaScript的方法,并提供相关的实例代码供参考。 一、jQuery文字滚动实现 jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和动画效果。在...

    文字列表无缝向上滚动

    这种效果通过编程技术实现,使得文字列表在到达顶部时不是突然消失,而是无缝地从底部重新出现,形成一种循环滚动的效果,增加网站的互动性和吸引力。 实现这种效果的关键在于JavaScript和CSS的配合。在给定的文件...

    javascript实现文字图片上下滚动的具体实例

    在JavaScript编程中,实现文字和图片的上下滚动效果是一个常见的需求,尤其是在网页设计中,这种效果常被用于新闻滚动条、公告栏和轮播图等。本文将介绍如何使用JavaScript来实现一个简单文字图片上下滚动的实例。 ...

Global site tag (gtag.js) - Google Analytics