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
FollowersFollowers: 1
BookmarksBookmarks: 1
Views: 1935

jQuery Marquee / Laufschrift / Scrollboxen

Post#1by 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: Select all
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: [ Raw ] [ Download ] [ Verstecken ]
html4strict Code
  1. <h2>Vertikale Scrollbox:</h2>
  2. <script type="text/javascript">(function($){$(document).ready(function(){$('.gscroll_v').SetScroller({velocity:60,direction:'vertical'})});})(jQuery);</script>
  3. <div class="gscroll_v" style="width:380px;height:230px;position:relative;display:block;overflow:hidden;"><div style="position:absolute;">
  4.         test1<hr>test2<hr>test3<hr>test4
  5. </div></div>
  6.  
  7.  
  8.  
  9. <h2>Horizontale Scrollbox:</h2>
  10. <script type="text/javascript">(function($){$(document).ready(function(){$('.gscroll_h').SetScroller({velocity:60,direction:'horizontal'})});})(jQuery);</script>
  11. <div class="gscroll_h" style="width:380px;height:230px;position:relative;display:block;overflow:hidden;"><div style="position:absolute;">
  12.         test1<hr>test2<hr>test3<hr>test4
  13. </div></div>
  14.  
  15.  
  16.  
  17. <h2>Aktiviere den PingPong Mode (gut für ein einzelnes kleines Bild):</h2>
  18. <script type="text/javascript">(function($){$(document).ready(function(){
  19.         $('.gscroll_ping').ResetScroller({  velocity:85, movetype:'pingpong', onmouseover:'play', onmouseout:'play' });
  20.         $('#gscroll_pong').bind('bouncer', function(){$(this).animate({top:42}, 500, 'linear').animate({top:5}, 500, 'linear', function(){$('#gscroll_pong').trigger('bouncer');});}).trigger('bouncer');
  21. });})(jQuery);</script>
  22. <div style="width: 380px;height:230px;position:relative;display:block;overflow:hidden;" class="gscroll_ping"><div style="position: absolute;">
  23.         <span id="gscroll_pong" style="display:block;position:absolute;top:0px;left:0px;">ping pong text</span>
  24. </div></div>


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: [ Raw ] [ Download ] [ Verstecken ]
javascript Code
  1. velocity:               from 1 to 99                                            [default is 50]
  2.  
  3. direction:              'horizontal' or 'vertical'                              [default is 'horizontal']
  4.  
  5. startfrom:              'left' or 'right' for horizontal direction              [default is 'right']
  6.  
  7.                         'top' or 'bottom' for vertical direction                [default is 'bottom']
  8.  
  9. loop:                   from 1 to n+, or set 'infinite'                         [default is 'infinite']
  10.  
  11. movetype:               'linear' or 'pingpong'                                  [default is 'linear']
  12.  
  13. onmouseover:            'play' or 'pause'                                       [default is 'pause']
  14.  
  15. onmouseout:             'play' or 'pause'                                       [default is 'play']
  16.  
  17. onstartup:              'play' or 'pause'                                       [default is 'play']
  18.  
  19. cursor:                 'pointer' or any other CSS style                        [default is 'pointer']
  20.  
Kostenloses phpBB3 Foren Hosting - Entwickler | Hosting | Admin :Pingouin02:
User avatar
Teamleiter & Techniker Gooof
Foren Doktor
Foren Doktor
 
Posts: 30245
Joined: 12.2005
Cash on hand: 3,407.07 Points
Bank: 27,118.15 Points
Location: phpbb9.de
Thanks: 1228
Thanked: 3422 times in 1909 posts
Highscores: 226
Gender: Male
Your Forum URL: http://support.phpbb8.de
Forenstyle: prosilver Special Smooth *

The following user would like to thank Teamleiter & Techniker Gooof for this post

Return to "Tipps zu den Styles"


 

Who is online

Users browsing this forum: No registered users and 1 guest

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