`
liushengit
  • 浏览: 36497 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

兼容多种浏览器的公告栏文字滚动效果js代码

    博客分类:
  • html
 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字滚动效果js代码</title>
</head>
<body>
<div id=demo style=overflow:hidden;height:100;width:350;background:#214984;color:#ffffff>
  <div id=demo1>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
     兼容多种浏览器的公告栏文字滚动效果js代码<br>
  </div>
  <div id=demo2></div>
 </div>
<script>
   var speed=30;
   demo2.innerHTML=demo1.innerHTML;  //克隆demo1为demo2
   function Marquee(){
     if(demo2.offsetTop-demo.scrollTop<=0)  //当滚动至demo1与demo2交界时
        demo.scrollTop-=demo1.offsetHeight;  //demo跳到最顶端
     else{
        demo.scrollTop++;
     }
   }
   var MyMar=setInterval(Marquee,speed)  //设置定时器

   demo.onmouseover=function() {//鼠标移上时清除定时器达到滚动停止的目的
      clearInterval(MyMar);
   }
   demo.onmouseout=function() { //鼠标移开时重设定时器
      MyMar=setInterval(Marquee,speed);
   }
</script>
</body>
</html>

 

分享到:
评论

相关推荐

    30多种上下左右滚动代码兼容各种浏览器

    本文将详细讲解30多种上下左右滚动代码,这些代码经过优化,能够兼容各种主流浏览器,包括IE、Firefox、Chrome、Safari和Opera等。 一、连续滚动 连续滚动是最基础的滚动效果,它可以让文字或图片持续不断地从一侧...

    文字无缝滚动效果代码(jQuery),鼠标经过停下,鼠标移走继续滚动。兼容ie6及主流浏览器

    这个代码资源就是基于jQuery库实现的,适用于创建一个在鼠标悬停时暂停,鼠标离开后继续滚动的文字滚动效果,同时它还兼容了古老的Internet Explorer 6以及现代的主流浏览器。 首先,我们来了解一下jQuery。jQuery...

    文字滚动消息广告代码.rar

    在实际开发中,文字滚动消息广告代码可能需要考虑兼容性问题,确保在各种浏览器上都能正常运行。此外,还可以结合jQuery等库来简化DOM操作和动画实现,提高开发效率。 总结,文字滚动消息广告代码是JavaScript动态...

    javascript文字滚动案例

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

    浏览器状态栏信息来回移动

    这篇名为“浏览器状态栏信息来回移动”的博文可能是介绍如何通过JavaScript动态改变浏览器状态栏的文字内容,从而实现信息的滚动或动画效果。这种效果在早期网页设计中常见,用于吸引用户的注意力或者显示滚动公告。...

    js滚动集合(图片滚动,文字滚动)

    本资源“js滚动集合”专注于提供图片滚动和文字滚动的效果实现,适用于创建引人注目的网页动态展示。 一、图片滚动 图片滚动是网页设计中常见的动态效果,它可以提升用户体验,吸引用户的注意力。JavaScript可以...

    文字滚动效果鼠标经过停留.zip

    总的来说,"文字滚动效果鼠标经过停留"是一个结合了JavaScript动态控制和CSS样式设计的交互效果,它有效地利用了现代浏览器的能力,同时也照顾到了老版本浏览器的兼容性,为用户提供了一种便捷且直观的信息阅读方式...

    Jquery实现的文字滚动

    文字滚动通常是通过改变元素的位置或者更新其内容来实现的,这种效果在新闻网站或公告栏中非常常见,可以吸引用户的注意力。向上滚动则意味着内容会从底部逐渐移向顶部,直至消失。 要实现这个效果,首先确保在HTML...

    jQuery文字逐行向上滚动代码.zip

    jQuery文字逐行向上滚动代码是一种常见的网页动态效果,它能够使文本内容以逐行上升的方式展示,常用于新闻更新、公告栏或者滚动广告等场景,为网页增添动态视觉效果,吸引用户注意力。在这个"jQuery文字逐行向上...

    使用html页面制作一个公告栏,用来横向滚动展示文字

    在上面的代码中,`.scrolling-text`类设置了公告栏文字的滚动效果,通过CSS动画`@keyframes`定义了一个名为`scroll`的动画,使得内容从右向左平滑移动。`overflow: hidden`和`white-space: nowrap`确保了内容不会折...

    textSlider多行文字滚动插件demo

    总的来说,“textSlider多行文字滚动插件demo”是一个实用的前端工具,能够帮助开发者轻松实现复杂而美观的文本滚动效果,同时确保在多种浏览器环境下稳定运行。结合jQuery的便利性和ECMAScript的灵活性,这个插件在...

    跑马灯特效--文字滚动

    跑马灯特效在新闻网站、广告展示、公告栏等多种场景中都有广泛的应用。例如,在新闻网站的头条区域,可以使用跑马灯展示多条新闻标题;在电商应用的促销页面,滚动显示优惠信息可以增加用户关注度。 通过以上介绍,...

    jQuery文字滚动鼠标点击停止特效.zip

    《jQuery文字滚动鼠标点击停止特效》 ...这个特效不仅可以应用于新闻滚动、公告栏等场景,还能作为基础,进一步拓展出更多交互性强的文字展示方式。理解并掌握这些技术,对于提升网页交互性和用户体验有着积极的意义。

    js 上下文字滚动效果

    ### JS上下文字滚动效果知识点详解 #### 一、概述 在网页设计中,为了增加页面的动态效果,提升用户体验,常常会使用JavaScript来实现各种特效,其中“上下文字滚动效果”是非常常见的一种。这种效果通常用于展示...

    网页标题栏跑马灯特效

    - 当文字滚动到末尾时,重置状态准备下一轮滚动。 4. **加速滚动**(可选): - 在某些情况下,可以通过调整跳跃空格数来实现加速滚动的效果。 #### 三、代码解析 下面对提供的代码进行详细分析: 1. **定义...

    文字滚动JS

    ### 文字滚动JS知识点解析 #### 一、概述 在网页设计与开发中,动态效果是提升用户体验的重要手段之一。其中,“文字滚动”作为一种常见且实用的特效,被广泛应用于公告栏、滚动新闻等场景中。本文将针对提供的...

    无间隙滚动js

    总结起来,无间隙滚动JS是网页动态效果的一种实现,通过结合CSS和JavaScript,可以创造出吸引人的文字滚动效果。理解和掌握这一技术,有助于提升网页设计和开发能力,为用户提供更生动、更具互动性的浏览体验。

    jquery文字图片滚动插件scroll.js下载地址.zip

    这种滚动效果不仅适用于新闻滚动、公告栏,还可以用于产品展示、用户评价等场景。插件通过JavaScript的定时器函数实现周期性滚动,同时提供参数配置,允许开发者自定义滚动速度、方向、暂停等行为。 使用scroll.js...

    js 文字无限,有间断往上滚动

    这种效果常用于新闻滚动条、公告栏等场景,能够有效地展示大量信息而不会占用过多的网页空间。 ### 技术原理与实现步骤 #### 1. HTML结构定义 在HTML文档中,首先需要定义一个容器来承载滚动的文本。在这个例子中...

Global site tag (gtag.js) - Google Analytics