js走马灯代码（html5跑马灯代码）

今天给各位分享js走马灯代码的知识，其中也会对html5跑马灯代码进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、文字走马灯 置顶显示
• 2、一行文字跑马灯怎样用Jquery或js做？
• 3、jquery跑马灯效果

文字走马灯 置顶显示

应用css实现走马灯置顶显示

超出显示

用到命令 text-overflow ： clip | ellipsis 文本超出：截断|省略

但这一条命令是看不到效果的，需要另外两条命令配合使用，让文本能够溢出，第一个是强制一行内显示，white-space:nowrap；第二个是溢出内容隐藏,overflow:hidden

超出跑马等效果

老的前端开发人员对于marquee标签肯定不陌生，一个被淘汰的标签，被刚入门的新手所喜爱，因为能通过一个简单的标签做出动态的效果。但是在实际应用上的局限性和效果的过时，使这个标签退出历史舞台，大家纷纷改用js来实现无间断滚动等效果。

新的CSS3 marquee设置，可以说功能强大了很多，更加易操作，用简单的代码解决了js中比较纠结的字符长度判断等难题。强烈推荐大家使用。

对于这个属性的定义，W3C标准用法和webkit内核浏览器的支持用法并不相同，由于我们立足实战实用，所以这里只介绍好用的。可用的。

我们需要四句常用命令

overflow:-webkit-marquee;//指定溢出时滚动。

-webkit-marquee-style:scroll | slide | alternate; //跑马灯样式，分三种。

scroll，从一端滚动到另一端，内容完全滚入（消失）时重新开始。slide，从一端滚到另一端，内容接触到另一端后，立马重新开始。alternate，内容不跑到显示区域外，在里面来回碰壁反弹。这里主要用第一种。

-webkit-marquee-repetition:infinite | number;// 跑马灯跑的次数，infinite 为无限多次，不结束。或者可以用正整数设置滚动的次数。

-webkit-marquee-direction:up | down | left | right; //跑动的方向，这个要注意结合实际情况，即实际你操作的标签文本流溢出在哪个方向溢出。

-webkit-marquee-speed:slow | normal | fast;//跑动的速度设置。

一行文字跑马灯怎样用Jquery或js做？

使用方法：

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

script src="jquery-1.11.2.min.js"/script script src="marquee.js"/script

HTML结构：

跑马灯中的文字使用无序列表来制作，外面使用一个div作为包裹容器。

123456789101112    div class="container"  div class="marquee-sibling" Breaking News /div  div class="marquee"    ul class="marquee-content-items"      liItem 1/li      liItem 2/li      liItem 3/li      liItem 4/li      liItem 5/li    /ul  /div/div  

CSS样式：

下面是该跑马灯特效的一些基本样式。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    .container {  width: 100%;  background: #4FC2E5;  float: left;  display: inline-block;  overflow: hidden;  box-sizing: border-box;  height: 45px;  position: relative;  cursor: pointer;}  .marquee-sibling {  padding: 0;  background: #3BB0D6;  width: 20%;  height: 45px;  line-height: 42px;  font-size: 12px;  font-weight: normal;  color: #ffffff;  text-align: center;  float: left;  left: 0;  z-index: 2000;}  .marquee,*[class^="marquee"] {  display: inline-block;  white-space: nowrap;  position: absolute;}  .marquee { margin-left: 25%; }  .marquee-content-items {  display: inline-block;  padding: 5px;  margin: 0;  height: 45px;  position: relative;}  .marquee-content-items li {  display: inline-block;  line-height: 35px;  color: #fff;}  .marquee-content-items li:after {  content: "|";  margin: 0 1em;}  

初始化插件：

123    $(function (){  createMarquee();});  

在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

配置参数：

下面是该跑马灯特效的可用配置参数。

12345678910111213141516171819202122232425262728    $(function (){    createMarquee({          // controls the speed at which the marquee moves    duration:30000,       // right margin between consecutive marquees    padding:20,       // class of the actual div or span that will be used to create the marquee -     // multiple marquee items may be created using this item's content.     // This item will be removed from the dom    marquee_class:'.example-marquee',       // the container div in which the marquee content will animate.     container_class: '.example-container',       // a sibling item to the marqueed item  that affects -     // the end point position and available space inside the container.     sibling_class: '.example-sibling',       // Boolean to indicate whether pause on hover should is required.     hover: false    });  });  

jquery跑马灯效果

要实现简单的跑马灯效果其实运用html中marquee/marquee标签就可以达到了

基本属性如下：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

如果想要更多的动画效果，更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果

1.html 中写入ul id="marquee"li/li/ul

2.js中调入$("#marquee").marquee();即可

3.css比较简单，一般自己写，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相关参数如下：

{

yScroll:"top";  // 初始滚动方向 (还可以是"top" 或 "bottom")

showSpeed:850;  // 初始下拉速度

scrollSpeed:12;  // 滚动速度

pauseSpeed:5000;  // 滚动完到下一条的间隔时间

pauseOnHover:true;  // 鼠标滑向文字时是否停止滚动

loop:-1;  // 设置循环滚动次数 （-1为无限循环）

fxEasingShow:"swing";  // 缓冲效果

fxEasingScroll:"linear";  // 缓冲效果

cssShowing:"marquee-showing";  //定义class event handlers

init:null;  // 初始调用函数

beforeshow:null;  // 滚动前回调函数

show:null;  // 当新的滚动内容显示时回调函数

aftershow:null;  // 滚动完了回调函数

}

js走马灯代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于html5跑马灯代码、js走马灯代码的信息别忘了在本站进行查找喔。