marquee跑马灯的替代方式

随着H5的语义化，marquee标签逐渐被替代，后续可能浏览器不支持

这里介绍一下替代方式

实现位移的话，可以使用css3的transform配合过渡或者定时器

transition、transform、anmiation，使用css3的话，要考虑自己的应用场景，也就是滚动内容的宽度是固定的，因为@keyframe动画是在css中硬编码的，如果想用的话，这个就需要自己去找适合的插件了。

在这里分享个Js控制@keyframe动画的地址：https://blog.csdn.net/qq_40776187/article/details/85262210          作者：我是某慧

 

js的话，使用setInterval();

 

div：

<div class="LED" >

<div class="dd_start" >

这是划过的内容区块

</div>

<div class="dd_end" ></div>

</div>

----------------------------------------------

css：

.LED {

width: 600px;

height: 300px;

border: 10px solid red;

background-color: black;

box-sizing: border-box;

display: flex;

align-items: center;

margin: 100px auto;

overflow: hidden;

white-space: nowrap;

}

.dd_start,

.dd_end {

display: inline;

font-size: 100px;

color: white;

font-weight: bold;

padding: 0px 150px;

}

-------------------------------------------------------------------------------

Js代码：

引入jquery

function ScrollImgLeft() {

var speed = 5;

var MyMar = null;

var scroll_begin = $(".dd_start").get(0);

var scroll_end = $(".dd_end").get(0);

var scroll_div = $(".LED").get(0);

scroll_end.innerHTML = scroll_begin.innerHTML;

// 运动方式

function Marquee() {

// 用dd_end的宽度

if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0) {

scroll_div.scrollLeft -= scroll_begin.offsetWidth;

} else {

scroll_div.scrollLeft ++;

}

}

MyMar = setInterval(Marquee, speed);

scroll_div.onmouseover = function () {

clearInterval(MyMar);

}

scroll_div.onmouseout = function () {

MyMar = setInterval(Marquee, speed);

}

}

ScrollImgLeft();