1. Zuhause
  2. Frage und Antwort
  3. Javascript horizontale Scroll-Text

Javascript horizontale Scroll-Text

2016-07-22 11 views
0

Ich möchte horizontale Scroll auf meiner App. Es gibt mehrere Beispiele, aber ich habe einen gefunden, der meinen Bedürfnissen entspricht. Aber wenn ich es versuche, funktioniert es einfach nicht so, wie es sollte. Bitte schauen und mir sagen, was das Problem ist:Javascript horizontale Scroll-Text

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div.marquee { 
    white-space:no-wrap; 
    overflow:hidden; 
} 
div.marquee > div.marquee-text { 
    white-space:nowrap; 
    display:inline; 
    width:auto; 
} 
</style> 
<script> 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
</script> 
</head> 
<body> 
<div class='marquee'> 
    <div class='marquee-text'> 
     Testing this marquee function 
    </div> 
</div> 

</body> 
</html>

Update Es gibt keine Fehler in der Konsole ist: enter image description here

Quelle

2016-07-22 dmx

+0

Nun .... Sie könnten den alten '' Tag verwenden. –

+4

@GavinThomas es ist nicht 1998;) ist [veraltet] (http://caniuse.com/#search=marquee), nicht verwenden –

+0

1) Verwenden Sie 'setInterval' nicht für Animationen außer Kompatibilität mit alt Browser, 'requestAnimationFrame' und CSS-Animationen sind zuverlässiger. 2) Nachschlagen und Festlegen von Eigenschaften wie 'text-indent' und' width' jedes Bild ist schlecht für die Leistung, Transformationen sind besser. 3) Brauchst du wirklich ein Zelt? ;) – gcampbell

Antwort

4

Sie haben vergessen, jQuery in Ihre Website einbinden. Ansonsten funktioniert es wie erwartet (zumindest denke ich das).

$(document).ready(function() { 
 
    var marquee = $('div.marquee'); 
 
    console.log(marquee); 
 
    marquee.each(function() { 
 
     var mar = $(this),indent = mar.width(); 
 
     mar.marquee = function() { 
 
      indent--; 
 
      mar.css('text-indent',indent); 
 
      if (indent < -1 * mar.children('div.marquee-text').width()) { 
 
       indent = mar.width(); 
 
      } 
 
     }; 
 
     mar.data('interval',setInterval(mar.marquee,1000/60)); 
 
    }); 
 
});
div.marquee { 
 
    white-space:no-wrap; 
 
    overflow:hidden; 
 
} 
 
div.marquee > div.marquee-text { 
 
    white-space:nowrap; 
 
    display:inline; 
 
    width:auto; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='marquee'> 
 
    <div class='marquee-text'> 
 
     Testing this marquee function 
 
    </div> 
 
</div>

Edit:$(document).ready() hinzugefügt, um sicherzustellen, dass die Elemente geladen.

Quelle

2016-07-22 13:29:57 Dygestor

1

Warten Sie, bevor Sie das Skript ausführen.

<script> 
$(document).ready(function(){ 
var marquee = $('div.marquee'); 
console.log(marquee); 
marquee.each(function() { 
    var mar = $(this),indent = mar.width(); 
    mar.marquee = function() { 
     indent--; 
     mar.css('text-indent',indent); 
     if (indent < -1 * mar.children('div.marquee-text').width()) { 
      indent = mar.width(); 
     } 
    }; 
    mar.data('interval',setInterval(mar.marquee,1000/60)); 
}); 
}); 
</script>

sehen so this Frage, und nicht <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> in Header vergessen.

Quelle

2016-07-22 14:20:30 dmx

Verwandte Themen

 Verwandte Themen