Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] Mój zbugowany preloader obrazków, Powoc przy odpluskwianiu.
starach
post
Post #1





Grupa: Zarejestrowani
Postów: 999
Pomógł: 30
Dołączył: 14.01.2007
Skąd: wiesz ?

Ostrzeżenie: (0%)
-----


Hej,

Dawno dawno tematu... czytałem książkę o JS w której zawarty był rozdział o preloadingu obrazków. Chciałem z pamięci wykonać port tego skryptu na jQuery, ale zdaje się że coś spietruszyłem.

Jak najadę na przycisk od prawej bądź lewej strony to obrazek się podmienia, a potem znika. Zależy to też od szybkości z jaką najadę na owy link i z niego wyjdę.

  1. #header ul { position:relative; top:62px; left:250px; width:489px; height:38px; margin:0; padding:0;
  2. list-style:none; background:url('/images/Menu.png') no-repeat; }
  3. #header ul li { float:left; margin:9px 0 5px 30px; border:1px solid #F00; }
  4. #header ul li.first { margin-left:20px; }

  1. <ul>
  2. <li><a href="#" title="Link 1"><img src="/images/Menu/link_1.png" alt="Link 1" /></a></li>
  3. <li><a href="#" title="Link 2"><img src="/images/Menu/link_2.png" alt="Link 2" /></a></li>
  4. <li><a href="#" title="Link 3"><img src="/images/Menu/link_3.png" alt="Link 3" /></a></li>
  5. <li><a href="#" title="Link 4"><img src="/images/Menu/link_4.png" alt="Link 4" /></a></li>
  6. <li><a href="#" title="Link 5"><img src="/images/Menu/link_5.png" alt="Link 5" /></a></li>
  7. </ul>

[JAVASCRIPT] pobierz, plaintext
  1. $m = new Menu();
  2. $m.init();
  3.  
  4. function Menu()
  5. {
  6. this.aImg = new Array();
  7. this.aImgHover = new Array();
  8. var $ths = this;
  9.  
  10. this.init = function()
  11. {
  12. $("#header li a").each(
  13. function()
  14. {
  15. $ths.evt_HoverAppend($(this));
  16. });
  17. }
  18.  
  19. this.evt_HoverAppend = function($link)
  20. {
  21. $iImgIndex = this.aImg.length;
  22. $Img = $("img", $link);
  23. $Img.attr("index", $iImgIndex);
  24.  
  25. // Define hover image by adding -hover suffix before its extension
  26. $SImgSrc = new String($("img", $link).attr("src"));
  27. $sImgSrcExt = $SImgSrc.substring($SImgSrc.length - 3, $SImgSrc.length);
  28. $sImgHoverSrc = $SImgSrc.substring(0, $SImgSrc.length - 4) + "-hover." + $sImgSrcExt;
  29.  
  30. $ImgHover = new Image();
  31. $ImgHover.src = $sImgHoverSrc;
  32.  
  33. this.aImg.push($Img);
  34. this.aImgHover.push($($ImgHover).attr("index", $iImgIndex));
  35.  
  36. $link.hover(
  37. function()
  38. {
  39. $Img = $("img", this);
  40. $Img.replaceWith($ths.aImgHover[$Img.attr("index")]);
  41. },
  42. function()
  43. {
  44. $Img = $("img", this);
  45. $Img.replaceWith($ths.aImg[$Img.attr("index")]);
  46. });
  47. }
  48. }
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
starach
post
Post #2





Grupa: Zarejestrowani
Postów: 999
Pomógł: 30
Dołączył: 14.01.2007
Skąd: wiesz ?

Ostrzeżenie: (0%)
-----


Ehh oferma ze mnie. Zorientowałem się o co ci chodzi po pierwszym akapicie. I oczywiście zaczęło działać.

Mam jeszcze jedno pytanie dotyczące stricte jQuery. Jak w obiekcie wyselekcjonowanym za pomocą jQuery przechować informację?
np. Jeśli bym chciał opatulić link w jQuery $($link) to jak mam do niego przypisać zmienne overImage i outImage, żebym mógł się do nich odwołać w handlerze zdarzeń onmouseover i onmouseout?

[JAVASCRIPT] pobierz, plaintext
  1. function Menu()
  2. {
  3. this.init = function()
  4. {
  5. for(i=0; i<document.images.length; i++)
  6. {
  7. $image = document.images[i];
  8. if($image.parentNode.tagName == "A" && $image.parentNode.parentNode.parentNode.id == "menu")
  9. {
  10. this.evt_HoverAppend($image);
  11. }
  12. }
  13. }
  14.  
  15. this.evt_HoverAppend = function($image)
  16. {
  17. $link = $image.parentNode;
  18.  
  19. // Define hover image by adding -hover suffix before its extension
  20. $SImgSrc = new String($image.src);
  21. $sImgSrcExt = $SImgSrc.substring($SImgSrc.length - 3, $SImgSrc.length);
  22. $sImgHoverSrc = $SImgSrc.substring(0, $SImgSrc.length - 4) + "-hover." + $sImgSrcExt;
  23.  
  24. $link.overImage = new Image();
  25. $link.overImage.src = $sImgHoverSrc;
  26. $link.outImage = new Image();
  27. $link.outImage.src = $image.src;
  28.  
  29. $link.onmouseout = function()
  30. {
  31. this.childNodes[0].src = this.outImage.src;
  32. }
  33. $link.onmouseover = function() {
  34. this.childNodes[0].src = this.overImage.src;
  35. }
  36. }
  37. }
[JAVASCRIPT] pobierz, plaintext


Ten post edytował starach 6.04.2010, 17:52:33
Go to the top of the page
+Quote Post

Posty w temacie


Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Aktualny czas: 8.10.2025 - 22:36