Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] przewijacz tekstu
Forum PHP.pl > Forum > Po stronie przeglądarki
nieraczek
Jak wykorzystac jQuery do zrobienia takiego przewijacza tekstu jak na screenie nizej:
http://yfrog.com/06oknobj

Mam duzo tekstu i chcialbym zeby mozna bylo go w div'ie 200 x 200 px przewijac.

Czy trzeba tu wykorzystac slider stad: http://jqueryui.com/demos/slider/ ? Jesli tak to prosze o jakas podpowiedz jak moglbym go dostosowac do opisanej sytuacji ?
uirapuru
pare dni temu cos takiego sam napisałem własnie. do przewijania mysza korzysta z pluginu mousewheel ze strony jquery

tu masz kod:

to laduje w head
  1. <script language="JavaScript" src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  2. <script language="JavaScript" src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
  3. <script language="JavaScript" src="js/jquery.mousewheel.js" type="text/javascript"></script>
  4. <script type="text/javascript">
  5. $(function() {
  6. var tresc = $("div#tresc").height();
  7. var wys = $("div#wewnetrzny").height();
  8. var initval = 100;
  9. var pozycja = 0;
  10.  
  11. $("div#slider-vertical").css("height", tresc);
  12.  
  13. $("div#slider-vertical").slider({
  14. animate: true,
  15. orientation: "vertical",
  16. range: "max",
  17. min: 0,
  18. max: 100,
  19. value: initval,
  20. change: function(event, ui) {
  21. var top = -1*(wys - tresc)*(100-ui.value)/100;
  22. $("div#tresc div").css("top",top+"px");
  23. },
  24. slide: function(event, ui) {
  25. if(wys > tresc) {
  26. var top = -1*(wys - tresc)*(100-ui.value)/100;
  27. $("div#tresc div").css("top",top+"px");
  28. } else {
  29. $(this).disable();
  30. }
  31.  
  32. }
  33. });
  34.  
  35. $('#tresc').mousewheel(function(event, delta) {
  36. if(wys > tresc) {
  37. pozycja += delta*5;
  38.  
  39. $("div#slider-vertical").slider("value",initval + pozycja);
  40.  
  41. if (pozycja >= 0){
  42. pozycja = 0;
  43. }
  44.  
  45. if (pozycja <= -100){
  46. pozycja = -100;
  47. }
  48. } else {
  49. $(this).disable();
  50. }
  51. });
  52. });
  53. </script>


to w body:

  1. <div id="slider-vertical" style="float: right"></div>
  2. <div id="tresc"><div id="wewnetrzny" style="position: absolute;">
  3. <h1> Main Content </h1>
  4. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p></div></div>


css:

  1. #tresc {
  2. width: 700px;
  3. height: 400px;
  4. overflow: hidden;
  5. position: relative;
  6. }

nieraczek
wow, wielkie dzieki, myslalem ze slider jquery wymaga tylko kilku drobnych modyfikacji, nie sadzilem ze az tyle kodu jquery/javascript bedzie to wymagac - wielkie dzieki smile.gif
uirapuru
Może da się prościej, a ja nie umiem winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.