Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS]Efekt na obrazku
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
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.
wNogachSpisz
  1. <div class="list-bnr bnr-x1">
  2. <span class="shadow_ie"></span>
  3. <div class="imgWrapper">
  4. <div class="imgOver" style="opacity: 0"></div>
  5. <div class="overLink" style="top: 30px; opacity: 0">
  6. <div class="linkWrapper">
  7. <div class="linkWrapperExplorer">
  8. <div class="bigLink">
  9. <a href="http://www.adidas.pl/goallin/news/2012/06/performance-football-predatorunleashwhiteboot">ZOBACZ</a>
  10. </div>
  11. <div class="category">
  12. Football
  13. </div>
  14. </div>
  15. </div>
  16. </div>
  17. <div class="imgSimple">
  18. <img src="http://hp.static.adidas.com/brand/binaries/live/pl/images/2012/06/performance_football_PredatorUnleashWhiteBooth_CLP_230x230_55-4662.jpg" width="230" height="230" alt="">
  19. </div>
  20. </div>
  21. <div class="signature">
  22. <h3>Biały but - Historia zabójczo niebezpiecznych</h3>
  23. <a class="blackLink" href="http://www.adidas.pl/goallin/news/2012/06/performance-football-predatorunleashwhiteboot">ZOBACZ</a>
  24. </div>
  25. </div>


[JAVASCRIPT] pobierz, plaintext
  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. });
[JAVASCRIPT] pobierz, plaintext


  1. /* hp.static.adidas.com/brand/platform/css/style.css?26.12749
  2. od linii 415.. Problem w tym że za każdym razem jest generowany inny styl, w zależności od sygnatury przeglądarki, więc będzie trochę ciężko go odzyskać */
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.