`
高军威
  • 浏览: 181193 次
  • 性别: 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>
分享到:
评论

相关推荐

    javascript 间断和不间断文本滚动效果

    javascript 间断和不间断文本滚动效果

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

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

    好用的js不间断图片滚动效果

    本示例提供了一种“好用的js不间断图片滚动效果”,它通过两个JavaScript文件实现了平滑且不间断的图片轮播功能。下面将详细解释这一技术实现的关键知识点。 1. JavaScript基础:JavaScript是一种广泛应用于网页...

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

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

    【JavaScript源代码】JS实现公告上线滚动效果.docx

    【JavaScript源代码】JS实现公告上线滚动效果 在网页设计中,动态效果常常能吸引用户的注意力,提升用户体验。本文将介绍如何使用JavaScript实现一个公告上线滚动的效果,这种效果常见于新闻网站或者公告栏,能够...

    javascript不间断文字滚动控制代码

    这个容器可以是`&lt;div&gt;`或其他块级元素,设置合适的宽度和溢出隐藏,以实现文本滚动的效果: ```html ; overflow: hidden;"&gt; ``` 接着,在JavaScript中,我们可以读取数据库中的文本数据。这里通常涉及到服务器端的...

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

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

    不间断滚动(无缝滚动)修正版js+css

    "不间断滚动(无缝滚动)修正版js+css"是一个网页特效技术,主要应用于网站中,使得文本、图片或任何元素能够像跑马灯一样不间断地滚动展示,为页面增添动态效果,提高用户关注度。这种技术通常被称为marquee效果,...

    原生JS实现列表内容自动向上滚动效果

    效果展示 (鼠标移入,滚动停止;鼠标移出,滚动继续) 实现原理  1. html结构:核心是ul &gt; li,ul外层包裹着div。因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容的ul。如下图:  (红色边框...

    JS不间断向右滚动.rar

    在网页设计中,JS常被用来实现各种动态效果,比如我们今天要讨论的“不间断向右滚动”效果。这个效果通常应用于新闻滚动、公告展示或者产品展示等场景,能够有效地吸引用户的注意力,提供更丰富的信息展示方式。 ...

    JS不间断向上滚动.rar

    在网页设计中,"JS不间断向上滚动"通常指的是使用JavaScript实现的一种动态效果,它可以使页面中的内容持续不断地向上滚动,给用户带来一种连续更新的视觉体验。这种效果常用于新闻滚动、公告栏或者社交媒体的实时...

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

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

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

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

    JavaScript JS 图片不间断滚动

    在这个场景中,我们讨论的是使用JavaScript和CSS来创建一个图片不间断滚动的效果,这是一种常见的网页设计技巧,常用于展示产品、新闻或者广告。 首先,我们要理解JavaScript在其中的角色。JavaScript可以用来控制...

    JS不间断向右滚动简单易用

    JS不间断向右滚动 html实例JS不间断向右滚动

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

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

    图片不间断滚动

    【标题】:“图片不间断滚动”是一种常见的网页动态效果,它使得一组或多组图片在页面上以循环滚动的方式展示,常用于新闻网站的轮播图、产品展示或网站背景装饰等。这种技术通常结合HTML、CSS和JavaScript来实现,...

    JS不间断向上滚动无缝隙

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

    javascript 实现新闻咨询图片滚动效果

    javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询图片滚动效果javascript 实现新闻咨询...

    JS实现的新闻列表自动滚动效果示例

    【JS实现新闻列表自动滚动效果】在网页设计中,新闻列表自动滚动是一种常见的动态效果,它能够提升用户体验,使用户无需手动滚动就能查看最新的信息。本文将深入探讨如何使用JavaScript来实现这一功能。 首先,我们...

Global site tag (gtag.js) - Google Analytics