`
高军威
  • 浏览: 180658 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS实现文本不间断上线滚动效果【转】

 
阅读更多
其实这种js控制文本上下不间断滚动的例子不少,但是常常找的不是想要的。不是代码过于冗余就是效果不尽人意,再有就是每次用到都要去找,这也是鄙人缺乏条理性的一个显著特征。今天找到一个代码简洁,效果也不错的一个特效,所以就发上来分享加备份~
首先是css代码:

<style type="text/css"> 
	#marquee ,#marquee li { padding:0px; margin:0px;}  
	#marquee { position:relative; list-style:none; height:25px; width:210px;           padding-left:5px; overflow:hidden; border:10px solid #eee; }
	#marquee li { position:absolute; font-size:12px;}  
	#marquee a { display:block; color:#999999; text-decoration:none;}  
</style>


其次是js代码:

<script type="text/javascript"> 
  var Marquee = function(id){  
    try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};  
    var container = document.getElementById(id),  
    slide = container.getElementsByTagName("li")[0],  
    speed = arguments[1] || 80,  //速度  
    delta = 0,//当前滚动的位置  
    critical = slide.offsetHeight;//临界点  
    slide.innerHTML  = slide.innerHTML;  
    var rolling = function(){  
      delta == -critical ? delta = 0 : delta--;  
      slide.style.top = delta+"px";  
    }  
    var timer = setInterval(rolling,speed)//设置定时器  
    container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时,清除定时器,停止滚动  
    container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器  
  }  
  window.onload = function(){  
    Marquee("marquee");  
  }  
</script>


最后就要滚动的部分:

<ul id="marquee"> 
  <li> 
    <a href="#">纤云弄巧,飞星传恨,银汉迢迢暗度。</a><br /> 
    <a href="#">金风玉露一相逢,便胜却、人间无数。</a><br /> 
    <a href="#">柔情似水,佳期如梦。忍顾鹊桥归路!</a><br /> 
    <a href="#">两情若是久长时,又岂在、朝朝暮暮。</a><br /> 
    <a href="#">千重劫,百世难,亘古匆匆,弹指间!</a><br /> 
    <a href="#">不死躯,不灭魂,震古烁今,无人敌!</a><br /> 
    <a href="#">待到阴阳逆乱时,以我魔血染青天!</a><br /> 
  </li> 
</ul>
分享到:
评论

相关推荐

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

    标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例,它主要用于创建一串文字在单一行内循环滚动,通常用于网站的头部或侧边栏,以动态展示最新的新闻标题或公告。 要实现这个效果,首先...

    不间断滚动(js封装类,javascript,不间断,滚动,scroll)

    不间断滚动(js封装类,javascript,不间断,滚动,scroll)

    JS不间断向左右循环滚动

    本教程将详细讲解如何使用JS实现图片的不间断左右循环滚动效果。 首先,我们需要理解核心概念:滚动。在网页中,滚动通常涉及到元素的动态移动,这可以通过改变其CSS属性来实现。这里的"不间断"意味着滚动效果应该...

    JS无间断图片循环滚动效果html版

    JS无间断图片循环滚动效果html版 JS无间断 图片循环 JS滚动效果 无间断滚动

    JS实现图片的不间断连续滚动

    【JS实现图片不间断连续滚动】 在网页设计中,经常需要创建动态效果来吸引用户的注意力,其中图片的连续滚动是一种常见的手法。传统的HTML标签`&lt;marquee&gt;`可以实现滚动效果,但对图片的处理并不理想,会出现明显的...

    上下不间断轮播的新闻滚动效果代码

    总的来说,无论是原生JavaScript还是jQuery,实现上下不间断轮播的新闻滚动效果都需要理解基本的DOM操作和事件处理。掌握这些技能将有助于你创建更具吸引力和交互性的网页。实践中,你可以根据项目需求和性能考虑...

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

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

    不间断无缝滚动图片

    在网页设计中,"不间断无缝滚动图片"是一种常见的视觉效果,它通过JavaScript或者CSS3等技术实现,使得图片能够连续不断地、平滑地从一端滚动到另一端,给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...

    javascript效果源码\向左不间断(无缝)滚动图片js代码

    在本资源中,我们关注的是一个特定的JavaScript效果——向左不间断(无缝)滚动图片的实现。这个效果通常用于网站的轮播图或者产品展示区域,它可以连续不断地将图片从左侧滑入视区,给人一种连续、流畅的视觉体验。...

    JS不间断向左滚动

    【JS不间断向左滚动】是一种常见的网页动态效果,主要用于展示一系列内容,如新闻滚动、广告轮播等。这种效果能够使页面保持活力,吸引用户的注意力。在本文中,我们将深入探讨如何利用JavaScript实现这一功能,并...

    js表格无缝滚动效果

    为了提供更好的用户体验,可以采用JavaScript(js)来实现表格的无缝滚动效果,让表格像一个无边界的容器一样平滑滚动。这种效果在大数据量的展示或者长表格中尤其有用,它能让用户更容易地浏览和查找信息。 首先,...

    Marquee Scroll通用不间断滚动JS封装类

    Marquee Scroll通用不间断滚动JS封装类是一种常见的JavaScript技术,用于实现网页元素的自动滚动效果,常见于新闻滚动、公告栏等场景。这类封装类的主要目的是简化开发者的工作,提供一种便捷的方式来实现不同方向...

    js实现新闻列表连续的滚动效果

    通过js实现的新闻列表的滚动效果 效果为连续滚动

    jQuery实现表头固定表格内容滚动效果

    在网页设计中,当表格数据过多时,为了保持良好的用户体验,常常需要实现表头固定而内容可滚动的效果。`jQuery`作为一个广泛使用的JavaScript库,提供了丰富的功能和便利的方法来实现这种效果。本教程将深入探讨如何...

    JS不间断向上滚动无缝隙

    JS不间断向上滚动 javascript不间断向上滚动 无缝隙

    jsdiff一个javascript的文本差异比较实现

    jsdiff作为一个强大的JavaScript文本比较库,提供了多种比较方式和丰富的API,使得在Web应用中实现文本差异比较变得简单易行。无论是开发代码审查工具,还是构建协同编辑系统,jsdiff都是一个值得信赖的选择。通过...

    通用不间断滚动JS封装类

    标题 "通用不间断滚动JS封装类" 提供了一个关键线索,那就是关于JavaScript的封装技术,特别是针对不间断滚动效果的实现。这种效果通常用于新闻滚动、广告轮播或任何需要连续滚动内容的网页元素。封装类是一种将功能...

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

    我们首先需要理解这个功能的基本概念:通过JavaScript(简称JS)实现一段文本或多个文本元素在网页上以连续但带有间断的方式向上滚动,同时当滚动到一定程度时,文本会重新出现在屏幕底部,形成一种循环滚动的效果。...

    JavaScript实现公告栏上下滚动效果

    本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先,我们需要理解公告栏滚动效果的基本原理。在给定文件示例中,公告栏的滚动效果是通过动态修改HTML元素CSS属性(如`marginTop`)来...

    MSClass Class Of Marquee Scroll通用不间断滚动JS封装

    本文将详细讨论“MSClass Class Of Marquee Scroll通用不间断滚动JS封装”这一主题,这是一种利用JavaScript实现的滚动效果,旨在为网页元素提供无缝、连续的滚动动画。 一、Marquee效果简介 Marquee效果源自HTML4...

Global site tag (gtag.js) - Google Analytics