Registriere dich hier, um versteckte Bereiche sehen zu können, Highscores zu speichern oder Fragen zu stellen!

jQuery Marquee / Laufschrift / Scrollboxen

Adminbereich -> Styles -> [subSilver Styles]
für subSilver2 Styles: 610nm, AcidTech, Vista, bo2Soft, subsilver2, eTech, Serenity, vBoard, xand, zeige weitere

Adminbereich -> Styles -> [prosilver Styles]
für prosilver Styles: BrownChocolate, WoWKing, Eliteblue, Glacier, GreenGrass, RedSunrise, prosilver, zeige weitere
Kostenloses phpbb2 Forum
phpbb2 Forum Hosting
www.phpbb6.de
phpbb9 ist das Support Forum für unsere Hosting Services.Hilfe nur für Foren von Kostenloses-Forum.be, Userboard.org, plusBB, phpbb8.de, phpbb6.de, Gratis-Board.de und Forumo.de.
Du hast dein Forum nicht bei uns? Dann schaue dich um und siehe was du selbst völlig kostenlos machen könntest, gucke dir auch andere interessante Foren aus unserem Netzwerk an!
Du erhältst hier Tipps und Problemlösungen zu deinem Forum bei uns!

phpbb3
phpBB3 Forum Hosting
www.phpbb8.de
AbonnentenAbonnenten: 1
LesezeichenLesezeichen: 1
Zugriffe: 2147

jQuery Marquee / Laufschrift / Scrollboxen

Beitrag#1von Teamleiter & Techniker Gooof » 01.04.2012 19:44

Scrollboxen im Forum einfügen

Zuerst muss immer festgelegt werden, wie groß die zu Scrollende Box sein soll, dafür muss die Zeile
Code: Alles auswählen
style="width:380px;height:230px;

geändert werden und die Breite und Höhe angepasst werden.


HTML Code Beispiele zum direkt einfügen ins Template oder Portal Block:
[syntax lang="html4strict" lines="f"]<h2>Vertikale Scrollbox:</h2>
<script type="text/javascript">(function($){$(document).ready(function(){$('.gscroll_v').SetScroller({velocity:60,direction:'vertical'})});})(jQuery);</script>
<div class="gscroll_v" style="width:380px;height:230px;position:relative;display:block;overflow:hidden;"><div style="position:absolute;">
test1<hr>test2<hr>test3<hr>test4
</div></div>



<h2>Horizontale Scrollbox:</h2>
<script type="text/javascript">(function($){$(document).ready(function(){$('.gscroll_h').SetScroller({velocity:60,direction:'horizontal'})});})(jQuery);</script>
<div class="gscroll_h" style="width:380px;height:230px;position:relative;display:block;overflow:hidden;"><div style="position:absolute;">
test1<hr>test2<hr>test3<hr>test4
</div></div>



<h2>Aktiviere den PingPong Mode (gut für ein einzelnes kleines Bild):</h2>
<script type="text/javascript">(function($){$(document).ready(function(){
$('.gscroll_ping').ResetScroller({ velocity:85, movetype:'pingpong', onmouseover:'play', onmouseout:'play' });
$('#gscroll_pong').bind('bouncer', function(){$(this).animate({top:42}, 500, 'linear').animate({top:5}, 500, 'linear', function(){$('#gscroll_pong').trigger('bouncer');});}).trigger('bouncer');
});})(jQuery);</script>
<div style="width: 380px;height:230px;position:relative;display:block;overflow:hidden;" class="gscroll_ping"><div style="position: absolute;">
<span id="gscroll_pong" style="display:block;position:absolute;top:0px;left:0px;">ping pong text</span>
</div></div>[/syntax]

Demo Seite für diesen Code: homepage/demo-scrollboxen.html
Natürlich kann man mit diesem Code auch einen neuen BBCode machen, den die User dann selbst benutzen können.


Mögliche Variablen und Optionen die benutzt werden können innerhalb von SetScroller():
[syntax lang="javascript" lines="f"]velocity: from 1 to 99 [default is 50]

direction: 'horizontal' or 'vertical' [default is 'horizontal']

startfrom: 'left' or 'right' for horizontal direction [default is 'right']

'top' or 'bottom' for vertical direction [default is 'bottom']

loop: from 1 to n+, or set 'infinite' [default is 'infinite']

movetype: 'linear' or 'pingpong' [default is 'linear']

onmouseover: 'play' or 'pause' [default is 'pause']

onmouseout: 'play' or 'pause' [default is 'play']

onstartup: 'play' or 'pause' [default is 'play']

cursor: 'pointer' or any other CSS style [default is 'pointer']
[/syntax]
Kostenloses phpBB3 Foren Hosting - Entwickler | Hosting | Admin :Pingouin02:
Benutzeravatar
Teamleiter & Techniker Gooof
Foren Doktor
Foren Doktor
 
Beiträge: 30245
Registriert: 12.2005
Barvermögen: 3.407,07 Points
Bank: 27.117,60 Points
Wohnort: phpbb9.de
Danke gegeben: 1228
Danke bekommen: 3424x in 1909 Posts
Highscores: 212
Geschlecht: männlich
Deine Foren-URL: http://support.phpbb8.de
Forenstyle: prosilver Special Smooth

folgende User möchten sich bei Teamleiter & Techniker Gooof bedanken:

Zurück zu "Tipps zu den Styles"


 

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast

Besucher kamen durch folgende Suchbegriffe auf diese Seite:

jquery laufschrift

laufschrift jquery

jquery marquee

jquery lauftext

lauftext jquery laufschrift mit jquery jquery mitscrollendes div jquery laufzeile laufschrift scrollen script download javascript lauftext jquery jquery script laufschrift javascript newsticker horizontal jquery laufschrift vertikal jquery text slider horizontal javascript lauftext horizontal javascript lauftext vertikal lauf text vertical javascript html variable laufschrift jquery horizontal scroll marquee laufschrift javascript led laufschrift jquery marquee syntax jquery smooth text marquee lauftext box jquery marquee richtung