文字走马灯 置顶显示

html-css018

文字走马灯 置顶显示,第1张

应用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//跑动的速度设置。

1.需要文字跑到结束再重新开始，需要开启定时器

2.从右向左移动，需要用到css 的 transform，设置transLateX,

3.何时重新跑的条件设置需要占位多宽 offsetWidth 属性

4.一行和多行需要区别判断

 1.css部分：

<div class="ul_box" @click="checkWidth()">

      <ul class="ul_id">

        <li class="li_id">

          <span class="content_id">

            {{message.Content}}

            啊啊啊啊，

          </span>

        </li>

      </ul>

    </div>

2.js部分

checkWidth(){

        let spanEle = document.querySelector('.content_id')

        let offsetWidth = spanEle.offsetWidth

        let liEle = document.querySelector('.li_id')

        let initOffset = liEle.offsetWidth-10

        liEle.style.transform = 'translateX(' + initOffset + 'px)'

        console.log(offsetWidth)

        let index = 0

        let timer = setInterval(function() {

          index++

          var translatex = initOffset - index * 5

          if (offsetWidth <initOffset) {

            if (translatex  <= 0) {

              translatex = initOffset

              index  = 0

            }

          }

          if (index >offsetWidth/5 &&offsetWidth >initOffset) {

            translatex = initOffset

            index = 0

          }

        liEle.style.transform = 'translateX(' + translatex + 'px)'

        }, 150)

      },

要实现简单的跑马灯效果其实运用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:blockline-height:1position:relativeoverflow:hiddenwidth:400pxheight:22px}ul.marquee li{ position:absolutetop:-999emleft:0display:blockwhite-space:nowrap padding:3px5pxtext-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 // 滚动完了回调函数 }