不带HTML的字幕 <marquee> .. </marquee>

Question

I'm trying to program a scrolling text that runs smooth. The <marquee>..</marquee> tag doesn't work without jolting and I don't think it is good programming. I would like to do it in JavaScript but I'm a total beginner in it.

I found some codes that are easy to understand but the scrolling text that I think looks best isn't coherent to me.

Perhaps someone can explain the parts to me I don't understand.

CODE:

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>')
}

Question: Why do I need the temp div ? And how can I swap the styles in CSS ?

Answer 1

I just would use CSS3-animations. It works in every modern browser like a charm. You don't need JavaScript to move an element.

If you want to switch it on and off, just add and remove a CSS class.

I just built an example in codepen: http://codepen.io/anon/pen/LGEBbx

This is the animation code:

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

I hope this was the solution you're looking for.

Answer 2

Well, marquee isn't only deprecated, it's also obsolete now.

Of course you can create a JavaScript function that simulates the effect. But it's simpler and certainly smoother to use CSS for that.

Here's an example:

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%); }
}

Demo

Try before buy