在不带<字幕></字幕>

Marquee in HTML without <marquee> .. </marquee>

本文关键字：字幕 gt lt      更新时间：2023-09-26

我正在尝试编程一个平滑运行的滚动文本。<marquee>..</marquee>标签在不震动的情况下无法工作，我认为这不是一个好的编程。我想用JavaScript做这件事，但我完全是初学者

我发现了一些易于理解的代码，但我认为最好看的滚动文本对我来说并不连贯

也许有人可以向我解释我不理解的部分。

代码：

var marqueewidth="2400px"   
var marqueeheight="45px"    
var speed=1 
var pause=1 //stop by mouseover 0=no. 1=yes
var marqueecontent='<nobr><span style="font-size:40px">*** Wir wünschen einen guten Start in den Dezember!!! ***</span></nobr>'
var newspeed=speed
var pausespeed=(pause==0)? newspeed: 0
document.write('<span id="temp" style="visibility:hidden; position:absolute; top:0px; left:-9000px">'+marqueecontent+'</span>')
var actualwidth=''
var cross_marquee, ns_marquee
function populate(){
    cross_marquee= document.getElementById("marquee")
    cross_marquee.style.left=parseInt(marqueewidth)+8+"px"
    cross_marquee.innerHTML=marqueecontent
    actualwidth=document.getElementById("temp").offsetWidth
    lefttime=setInterval("scrollmarquee()",20)
}
window.onload=populate

function scrollmarquee(){
    if (parseInt(cross_marquee.style.left)>(actualwidth*(-1)+8))
        cross_marquee.style.left=parseInt(cross_marquee.style.left)-newspeed+"px"
    else
        cross_marquee.style.left=parseInt(marqueewidth)+8+"px" 
}
with (document){
        write('<div style="position:relative; top:655px; width:'+marqueewidth+'; height:'+marqueeheight+'; overflow:hidden">')
        write('<div onMouseover="newspeed=pausespeed" onMouseout="newspeed=speed">')
        write('<div id="marquee" style="position:absolute; left:0px; top:0px; "></div>')
        write('</div></div>')
}

问题：为什么我需要tempdiv？如何在CSS中交换样式？

好吧，marquee不仅被弃用，而且现在已经过时了。

当然，您可以创建一个JavaScript函数来模拟这种效果。但是使用CSS会更简单，当然也更流畅。

这里有一个例子：

HTML

<div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>

CSS

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100px;
  border: 1px solid orange;
}
.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

演示

购买前试用

我只想使用CSS3动画。它适用于每一个现代浏览器，就像一个魅力。移动元素不需要JavaScript。

如果你想打开和关闭它，只需添加和删除一个CSS类。

我刚刚在codepen中构建了一个示例：http://codepen.io/anon/pen/LGEBbx

这是动画代码：

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

我希望这是你正在寻找的解决方案。

相关文章：