Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: scroller javascript
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
adeq_PL
21.05.2007, 20:43:53
Witam wszstkich. W sieci znalazlem skrypt bedacy scrollerem, ktory przewija sie w gore i w dol po najechaniu mysza na odpowiedni przycisk sterujacy. Tekst wyswietlany w scrollerze moz sie przewijac w gore i w dol.

Chcialbym zmienic skrypt w ten sposob zeby tekst byl przewijany poziomo a nie pionowo. Co i jak musialbym zmienic w tym skrypcie?

A oto i on:

[HTML] pobierz, plaintext 
  1. <HTML>
  2. <HEAD>
  3.  
  4. <STYLE TYPE="text/css">
  5.  
  6. #wrst{position:absolute;overflow:hidden;visibility:hidden;width:400px;height:230
    px;top:120px;left:100px;color:#336666;font:normal bold 16px Arial}
  7. #Up1{position:absolute;left:540px;top:118px;visibility:hidden}
  8. #Up2{position:absolute;left:540px;top:151px;visibility:hidden}
  9. #Up3{position:absolute;left:540px;top:181px;visibility:hidden}
  10. #Down1{position:absolute;left:540px;top:288px;visibility:hidden}
  11. #Down2{position:absolute;left:540px;top:310px;visibility:hidden}
  12. #Down3{position:absolute;left:540px;top:340px;visibility:hidden}
  13. </STYLE>
  14.  
  15.  
  16. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  17. cpsc='*********-    SCROLLER   -**********     '+
  18. 'Written by Bogdan Blaszczak                   '+
  19. 'homepage http://www.blatek.25.pl/javascript/  '
  20. //don't edit lines above
  21.  
  22. function ObScroll(o){
  23. this.z=getEl(o)
  24. with(this.z)this.w=d.g?getElementsByTagName('div')[0]biggrin.gif.a?all.tags('div')[0]:layers[0]
  25. this.s=d.l?this.w:this.w.style
  26. var zB=d.o?this.z.style.pixelHeight:d.l?this.z.clip.height:this.z.offsetHeight,
  27. wB=d.o?this.w.style.pixelHeight:d.l?this.w.document.height:this.w.offsetHeight,
  28. x=eval(st(blik,cpsc));this.l=this.y=this.loop=0
  29. this.obj=o+"Obj";eval(this.obj+"=this")
  30. function s(){clearInterval(this.l)}
  31. function S(k){with(this){stop();l=setInterval(obj+'.moveBy('+k+')',50)}}
  32. function M(k){with(this)if(k>0?y>x:y<0){y-=k;s.top=y}else if(loop)y=k>0?0:x}
  33. function m(k){with(this){if(k>-x)k=-x;if(k<0)k=0;stop();y=-k;s.top=-k}}
  34. function B(){with(this){stop();y=0;s.top=0}}function E(){with(this){stop();y=x;s.top=x}}
  35. this.moveBy=M;this.moveTo=m;this.scroll=S;this.stop=s;this.begin=B;this.end=E
  36. } 
  37. blik=[63,59,25,105,52]
  38. d=document,d.l=d.layers,d.a=d.all,d.g=d.getElementById,d.o=window.opera&&!d.appendChild
  39. //przeładuj Netscape'a 4.x przy zmianie rozmiaru okna
  40. function NSres(f){
  41. if(f==true){document.dW=innerWidth;document.dH=innerHeight;onresize=NSres}
  42. else if(innerWidth!=document.dW||innerHeight!=document.dH)location.reload()
  43. }if(document.layers)NSres(true);
  44. if(d.o)document.onmousemove=OpRes
  45. function OpRes(){if(window.ScrEl)if(getEl(ScrEl[0]).style.visibility.toLowerCase()!='visible')location.reload()}
  46. function st(t,h){var s='';for(var i=0;i<t.length;i++)s+=h.substr(t[i],1);return s}
  47. function getEl(id){
  48. with(d)var e=g?g(id):a?a[id]:l[id]
  49. if(!e.style)e.style=e;return e}
  50. </SCRIPT>
  51.  
  52. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  53. function InitScroll(){
  54. //utwórz obiekt
  55. Scroll1=new ObScroll('wrst')
  56. //wrzuć do tablicy "ScrEl" warstwę i elementy steruj&plusmn;ce przewijaniem
  57. ScrEl=['wrst','Up1','Up2','Up3','Down1','Down2','Down3']
  58. for(var i in ScrEl)getEl(ScrEl[i]).style.visibility='visible'
  59. }
  60. </SCRIPT>
  61.  
  62. </HEAD>
  63. <BODY onLoad="InitScroll()">
  64.  
  65.  
  66. <!-- Poczatek scrollowanej warstwy -->
  67. <div id="wrst">
  68. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  69. document.write(document.layers?'<layer>':'<div style="position:absolute">')</SCRIPT>
  70.  
  71. Jakis tekst ktory bedzie przewijany...
  72.  
  73. <script TYPE="text/javascript" LANGUAGE="JavaScript">
  74. document.write(document.layers?'</layer>':'</div>')</SCRIPT>
  75. </div>
  76. <!-- Koniec scrollowanej warstwy -->
  77.  
  78. <!-- Przyciski steruj&plusmn;ce -->
  79. <div id="Up1"><a href="java script:void(0);" onMouseOver="Scroll1.begin()"><IMG SRC="grafika/g3.gif" WIDTH="20" HEIGHT="25" BORDER="0"></a></div>
  80. <div id="Up2"><a href="java script:void(0);" onMouseOver="Scroll1.scroll(-6)" onMouseOut="Scroll1.stop()"><IMG SRC="grafika/g2.gif" WIDTH="20" HEIGHT="22" BORDER="0"></a></div>
  81. <div id="Up3"><a href="java script:void(0);" onMouseOver="Scroll1.scroll(-2)" onMouseOut="Scroll1.stop()"><IMG SRC="grafika/g1.gif" WIDTH="20" HEIGHT="14" BORDER="0"></a></div>
  82. <div id="Down1"><a href="java script:void(0);" onMouseOver="Scroll1.scroll(2)" onMouseOut="Scroll1.stop()"><IMG SRC="grafika/d1.gif" WIDTH="20" HEIGHT="14" BORDER="0"></a></div>
  83. <div id="Down2"><a href="java script:void(0);" onMouseOver="Scroll1.scroll(6)" onMouseOut="Scroll1.stop()"><IMG SRC="grafika/d2.gif" WIDTH="20" HEIGHT="22" BORDER="0"></a></div>
  84. <div id="Down3"><a href="java script:void(0);" onMouseOver="Scroll1.end()"><IMG SRC="grafika/d3.gif" WIDTH="20" HEIGHT="25" BORDER="0" ALT="Rozmiar: 266 bajtów"></a></div>
  85. <!-- **** -->
  86.  
  87. </BODY></HTML>
[HTML] pobierz, plaintext


A scroller wyglada nastepujaco: scroller
prond
23.05.2007, 08:42:35
Ostatnio musiałem zrobić taki właśnie scroller. Wrzuciłem go na http://blog.axent.pl/samples/js.scroll/.
Możesz go użyć.
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.