Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Efekt na Obrazku
Forum PHP.pl > Forum > Przedszkole
Cevo125
Witam, poszukuję skryptu JS , który będzie wyglądał jak na stronie http://www.adidas.pl/football/ , poniżej slidera. Mianowicie chodzi mi o to , po najechaniu myszką na obrazek przyciemnia się i wyskakują opcje zobacz "Trenuj->" , "Zobaccz" itp. Proszę o pomoc.
viking
A czy to taki wielki problem zerknąć w źródło i zobaczyć czego używają? 10 sekund

<script type="text/javascript" src="//hp.static.adidas.com/brand/platform//js/features.js"></script>
Cevo125
No tak ale co dalej ?
viking
A co byś chciał? Dołączyć jQuery, przepisać skrypt do swoich danych na stronie i zacząć trochę myśleć czasami.

I po co stworzyłeś dwa identyczne tematy w różnych działach?
Cevo125
Jestem początkujący . Więc prosilem o pomoc

@viking

Ponieważ nie byłeś w stanie mi pomóc.
viking
To że jesteś początkujący nie oznacza że mamy coś za ciebie robić. Tym bardziej że masz już cały kod który potrzebujesz na podanej stronie. Wystarczy zerknąć do podanego pliku. Jeśli czegoś nie wiesz napisz jak zrobiłeś, czego oczekujesz, wklej ten kod tutaj (w odpowiednich tagach) i wykaż się trochę. Na tę chwilę prezentujesz postawę, nie chce mi się - zróbcie za mnie.
Cevo125
JS:

  1. $(function() {
  2. $(".list-bnr").hover(function () {
  3. $(this).find(".imgOver").stop(true).animate({opacity:0.5, filter: 'alpha(opacity=50)'}, 150);
  4. $(this).find(".overLink").stop(true).animate({opacity:0.9, filter: 'alpha(opacity=90)', top:0}, 250);
  5. },function () {
  6. $(this).find(".imgOver").stop(true).animate({opacity:0, filter: 'alpha(opacity=0)'}, 300);
  7. $(this).find(".overLink").stop(true).animate({top:30, opacity:0, filter: 'alpha(opacity=0)'}, 250);
  8. });
  9.  
  10. });


Jak dopasować to do danego obrazka

viking
Poszukaj na stronie klas .imgOver i .overLink (firebug, klik na zdjęciach). Zobacz jak zrobione. Jeśli chcesz inne nazwy to zwyczajnie je zmień.
Cevo125
Napisałem sobie to w css , teraz jak można to przerobić na JS?

  1. div.top {
  2.  
  3. position: relative;
  4. width: 230px;
  5. height: 180px;
  6.  
  7. overflow: hidden;
  8. }
  9.  
  10. div.top div {
  11. width: 230px;
  12. height: 180px;
  13. font-size: 12px;
  14. padding: 10px;
  15. position: absolute;
  16. top: 0;
  17. left: 0;
  18.  
  19. text-align: center;
  20. background: #fff;
  21. -webkit-transition: left 1s ease-in-out;
  22. }
  23.  
  24. div.top div.first {
  25. z-index: 1000;
  26. }
  27.  
  28. div.top:hover div.first {
  29. -webkit-transition: left 1s ease-in-out;
  30. left: -230px;
  31. }
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.