Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [PHP][JavaScript]Uciekający obrazek, Uciekający obrazek
gornik
post
Post #1





Grupa: Zarejestrowani
Postów: 56
Pomógł: 9
Dołączył: 28.04.2010

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

Witam... Odkopałem stary skrypt który bedzie mi potrzebny do szkoły a mianowicie:
[PHP] pobierz, plaintext 
  1. function xxx(){
  2. if (document.getElementById('v2').innerHTML == ''){
  3. document.getElementById('x').style.right = -15+40+'px';
  4. document.getElementById('x').style.top = -15-20+'px';}
  5. else if (document.getElementById('v2').innerHTML == '1')
  6. {document.getElementById('x').style.right = -15+300+'px';
  7. document.getElementById('x').style.top = -15-20+'px';}
  8. else if (document.getElementById('v2').innerHTML == '11'){
  9. document.getElementById('x').style.right = -15+510+'px';
  10. document.getElementById('x').style.top = -15-40+'px';}
  11. else if (document.getElementById('v2').innerHTML == '111'){
  12. document.getElementById('x').style.right = -15+200+'px';
  13. document.getElementById('x').style.top = -15-30+'px';}
  14. else{
  15. document.getElementById('obr').style.display = 'none';}
  16. document.getElementById('v2').innerHTML += 1;}
[PHP] pobierz, plaintext


Zaczynam robic dopiero JS na lekcjach a wiem ze do tego skryptu byl dopięty jakoś div wraz z odnosnikiem do obrazka
<a id="v"></a>
<a id="v2" style="display: none;" ></a>
<div id="blablabla" index: -1 costam costam.. i odnosnik do obrazka>
Tutaj wklejałem TEKST </div> (coś w tym stylu tylko nie wiem jak poprawnie napisac ten div z obrazkiem)

Wyglądało to w ten sposób ze na pustej stronie wyskakiwał obrazek a ponizej niego tekst , i po najechaniu na obrazek przesuwał się on po całej stronie.

Wie ktoś jak to wykonac??
Go to the top of the page
+Quote Post
croc
post
Post #2





Grupa: Zarejestrowani
Postów: 706
Pomógł: 108
Dołączył: 12.03.2010

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

Ten skrypt wyrzuć do śmieci i napisz co dokładnie chcesz osiągnąć. Najlepiej narysuj i opisz.
Go to the top of the page
+Quote Post
gornik
post
Post #3





Grupa: Zarejestrowani
Postów: 56
Pomógł: 9
Dołączył: 28.04.2010

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

(IMG:http://img684.imageshack.us/img684/2380/stronaqw.jpg)

To taka forma zabawy/gry.
Chodzi o to ze wyskakuje obrazek który ucieka po najechaniu myszką tak jak pokazane jest na obrazku zmienia on swoje położenie po najechaniu kursorem, a po trzecim najechaniu znika razem z tekstem.
Go to the top of the page
+Quote Post
croc
post
Post #4





Grupa: Zarejestrowani
Postów: 706
Pomógł: 108
Dołączył: 12.03.2010

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

Najzabawniej będzie jeśli napis będzie uciekał w losową pozycję. Wystarczy jeden div ze stylem position: absolute. Ogólnie zamysł Twojego skryptu jest dobry, ale wykonanie trochę "naokoło".

Możesz zrobić zmienną, która będzie przechowywała liczbę trafień w napis. Przy onmouseover na div, niech ta zmienna się zwiększa o 1, a div niech dostaje nową pozycję. A jeśli zmienna osiągnie odpowiednią wartość, to div znika (display: none) i tyle.
Go to the top of the page
+Quote Post
gornik
post
Post #5





Grupa: Zarejestrowani
Postów: 56
Pomógł: 9
Dołączył: 28.04.2010

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

Po długotrwałej pracy metody prób i błędów wkoncu udało mi się rozwiązac ten problem. Podaje gotowy skrypt moze komuś się przyda (IMG:style_emoticons/default/smile.gif) 
[PHP] pobierz, plaintext 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <META http-equiv="content-type" content="text/html; charset=iso-8859-2">
  3. <script LANGUAGE= "JavaScript" TYPE= "text/javascript">
  4.  
  5. function xxx(){
  6. if (document.getElementById('v2').innerHTML == ''){
  7. document.getElementById('x').style.right = -15+10+'px';
  8. document.getElementById('x').style.top = -15-20+'px';}
  9. else if (document.getElementById('v2').innerHTML == '1')
  10. {document.getElementById('x').style.right = -15+300+'px';
  11. document.getElementById('x').style.top = -15-20+'px';}
  12. else if (document.getElementById('v2').innerHTML == '11'){
  13. document.getElementById('x').style.right = -15+510+'px';
  14. document.getElementById('x').style.top = -15-10+'px';}
  15. else if (document.getElementById('v2').innerHTML == '111'){
  16. document.getElementById('x').style.right = -15+200+'px';
  17. document.getElementById('x').style.top = -15-30+'px';}
  18. else{
  19. document.getElementById('obr').style.display = 'none';}
  20. document.getElementById('v2').innerHTML += 1;}
  21. </SCRIPT>
  22.  
  23.  
  24.  
  25. <BODY onload="sprawdz()" style="font-family: Arial, Sans Serif; font-color: white;">
  26.  
  27. <a id="v"></a>
  28. <a id="v2" style="display: none;" ></a>
  29.  
  30. <div id="obr" style="border: 0px; z-index: 2; position: absolute; top: 200px; ">
  31. <script type="text/javascript">
  32. if (navigator.appName == 'Explorer' ){
  33. document.getElementById('obr').style.left = ((window.innerWidth/2)-20)+'px';}
  34. else{document.getElementById('obr').style.left = ((document.body.offsetWidth/2)-20)+'px';}
  35. </script>
  36.  
  37.  
  38.  
  39. <div id="x" onmouseover="xxx()" onclick="  document.getElementById('obr').style.display='none'; " style=" position: absolute; right: -18px; top: -12px; z-index: 2"><img src="images/obrazekKONKURSOWY.jpg"></div>
  40.  
  41. TWOJ TEKST WPISZ TUTAJ
  42.  
  43. </div>
[PHP] pobierz, plaintext


Ten post edytował gornik 23.10.2011, 21:16:08
Go to the top of the page
+Quote Post
croc
post
Post #6





Grupa: Zarejestrowani
Postów: 706
Pomógł: 108
Dołączył: 12.03.2010

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

Jeśli działa to super. Kod? Okropny.
Go to the top of the page
+Quote Post
gornik
post
Post #7





Grupa: Zarejestrowani
Postów: 56
Pomógł: 9
Dołączył: 28.04.2010

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

Wiesz , tak jak mówiłem dopiero zaczynam uczyc się javascript , w zasadzie to miałem dopiero jedną lekcje wstępną , ten kod był robiony wg. poradników więc jest namieszany , ale jeżeli jest gotowy i działa to każdy może go sobie wklepac na serwer przetestowac działanie skryptu i zmodyfikowac kod tak aby był bardziej zwięzły i urozmaicony (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 08:48
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn