<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
<!-- Main CSS -->
<link href="style.css" rel="stylesheet" media="screen">
<!-- Responsive Framework -->
<link href="responsive.css" rel="stylesheet" media="screen">
<!-- Fontawesome CSS -->
<link href="font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- scrollbox Script -->
<script src="js/jquery.scrollbox.js"></script>
<script type="text/javascript">
$('#demo').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 100
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-6" id="demo">
<ul>
<li><a href="#">This text will scroll from bottom to up</a></li>
<li><a href="#">This text will scroll from bottom to up</a></li>
<li><a href="#">This text will scroll from bottom to up</a></li>
</ul>
</div>
</div>
</body>
</html>
Dies ist mein ursprünglicher Code für die Scrollbox. Es funktioniert noch nicht ..... Zuerst habe ich die Google Apis angehängt, dann das aus Github importierte Scrollbox-Skript, dann die Funktion und die Liste mit einem div, das id = "demo" aufruft.
2 Antworten
- Stellen Sie sicher, dass jQuery VOR der scrollbox.js geladen ist
- Verwenden Sie einen Teil des CSS von der Site der Scrollbox
Ich habe ein paar Dinge wie das CSS und weitere Elemente zum Scrollen hinzugefügt.
Dann habe ich die Scrollbox aus dem GitHub importiert und den Stil geändert
$('#demo').scrollbox({
linear: true,
step: 1,
delay: 0,
speed: 100
});
Und jetzt funktioniert es
Ihre <script>
Tags sollten invertiert werden, da scrollbox.js von jquery abhängt:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.scrollbox.js"></script>
Wenn etwas, das Sie erwarten, nicht passiert, müssen Sie zunächst das Fehlerprotokoll in den Entwicklertools überprüfen (drücken Sie einfach F12 in IE, FF oder Chrome).
Verwandte Fragen
Neue Fragen
jquery
jQuery ist eine JavaScript-Bibliothek. Fügen Sie auch das JavaScript-Tag hinzu. jQuery ist eine beliebte browserübergreifende JavaScript-Bibliothek, die das Durchlaufen von Dokumentenobjektmodellen (DOM), die Ereignisbehandlung, Animationen und AJAX-Interaktionen erleichtert, indem die Diskrepanzen zwischen den Browsern minimiert werden. Eine mit jQuery gekennzeichnete Frage sollte mit jQuery verknüpft sein, sodass jQuery von dem betreffenden Code verwendet werden sollte und mindestens jQuery-nutzungsbezogene Elemente in der Frage enthalten sein müssen.