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

一款js实现的文字滚动效果

 
阅读更多
<div id="marquees">
    <a href="#">你可曾有过无数的梦想,</a><br>
    <br>
    <a href="#">却在时光的流逝里幻灭 </a><br>
    <br>
    <a href="#">你可曾对未来期待憧憬,</a><br>
    <br>
    <a href="#">却在成长的岁月中迷失</a><br>
    <br>
</div>
<script language="JavaScript">

marqueesHeight = 200;
stopscroll = false;

with(marquees){
    style.width = 0;
    style.height = marqueesHeight;
    style.overflowX = "visible";
    style.overflowY = "hidden";
    noWrap = true;
    onmouseover = new Function("stopscroll=true");
    onmouseout = new Function("stopscroll=false");
}

document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop = 0; currentTop = 0;

function init(){
    templayer.innerHTML="";
    while(templayer.offsetHeight<marqueesHeight){
      templayer.innerHTML += marquees.innerHTML;
    }
    marquees.innerHTML = templayer.innerHTML+templayer.innerHTML;
    setInterval("scrollUp()",20);//滚动的速度

}
document.body.onload = init;

function scrollUp(){
    if(stopscroll==true) return;
    preTop=marquees.scrollTop;
    marquees.scrollTop += 1;
    if(preTop==marquees.scrollTop){
      marquees.scrollTop = templayer.offsetHeight-marqueesHeight;
      marquees.scrollTop += 1;
    }
}
</script>
分享到:
评论

相关推荐

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

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

    js实现单行文字滚动

    在本文中,我们将深入探讨如何使用JavaScript实现单行文字的滚动效果,这是一种常见的动态显示信息的方式,尤其适用于有限的空间展示大量文本。 首先,我们需要理解基本的HTML结构,因为JavaScript通常与HTML和CSS...

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

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

    js文字横向滚动特效,头尾停止

    "js文字横向滚动特效,头尾停止"是利用JavaScript和jQuery库实现的一种特定效果,当文字滚动到页面的边缘时会自动停止。 jQuery是一个轻量级、高性能的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互...

    js 文字滚动效果

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

    网页文字滚动的10种效果js实现

    以下是对"网页文字滚动的10种效果js实现"的详细解读: 1. **淡入淡出滚动**:此效果使文字在页面上逐渐显现,然后淡出,创造出优雅的视觉过渡。通过调整透明度变化的时间和速度,可以调整效果的平滑度。 2. **向上...

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

    【文字滚动一次一行特效.zip】这个压缩包包含了一个实现文字滚动效果的代码资源,主要针对网页中的文字展示。滚动文字是一种常见的动态效果,可以用于新闻更新、公告展示或者任何需要节省空间并展示大量文本的场景。...

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

    "js+css3文字上下滚动切换动画特效"就是一种实现这种效果的技术方案。它结合了JavaScript(js)的编程逻辑与CSS3的新特性,为网页的文字展示带来了生动且富有创意的变化。 首先,我们来了解JavaScript(js)的作用...

    JS实现文字间隔性滚动代码

    在本主题中,我们将深入探讨如何利用JS实现文字间隔性滚动的效果,这种效果常见于网站的新闻标题滚动,使得信息展示更加动态且节省空间。 一、基本原理 文字间隔性滚动通常是通过改变文本元素的位置来实现的。JS...

    图片文字滚动特效JS大杂烩

    例如,Marquee标签在HTML中曾被用来实现文字滚动,但在现代网页设计中,更多是用JavaScript库如jQuery Marquee或ScrollOut来实现更复杂的效果。 3. **JS(JavaScript)**:JavaScript是一种广泛使用的客户端脚本...

    js文字滚动插件

    此外,压缩包中的"scrolltext"可能包含示例代码、样式表(CSS)或其他资源,这些可以帮助你理解和实现文字滚动效果。CSS可以用来定制滚动元素的样式,如字体、颜色、背景等,以适应网页的整体设计。 总的来说,js...

    js实现图片无缝滚动或者文字滚动

    当文字滚动出视口时,将其重新设置为初始位置,实现无缝滚动效果。 3. **实例分析**: 压缩包中的`文字上翻.html`可能是演示文字翻滚的一个例子,可能使用了JS动态改变元素的`top`或`transform`属性,使得文字看...

    js文字滚动制作js scroll单排文字滚动向上间歇滚动

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

    基于DIV的JS文字滚动特效.rar

    "基于DIV的JS文字滚动特效"是一个利用JavaScript实现的特定功能,旨在通过自定义滚动条控制文字内容的滚动显示。这个功能尤其适用于长篇文章或者新闻列表的展示,用户可以通过拖动滚动条来查看隐藏在屏幕之外的文字...

    JS实现文字信息无缝滚动效果

    1. JavaScript基础:首先,要实现文字滚动,我们需要了解JavaScript的基本语法,包括变量声明、数据类型、条件语句、循环结构等。此外,还需掌握函数的使用,因为滚动效果通常会封装在一个或多个函数中,便于调用和...

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

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

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

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

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

    在网页设计中,动态的文字滚动效果常常用于展示大量的信息或者吸引用户的注意力。本文将深入探讨“文字滚动的几种实现”,包括使用jQuery和JavaScript的方法,并提供相关的实例代码供参考。 一、jQuery文字滚动实现...

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

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

    jq实现文字滚动到那一屏幕

    1. `xw素材.htm`:这可能是一个示例HTML文件,包含了实现文字滚动效果的代码和结构。 2. `index.html`:这是Web应用的入口文件,很可能包含了整个项目的主体结构和jQuery脚本。 3. `更多素材.url`:这是一个链接,...

Global site tag (gtag.js) - Google Analytics