Forum PHP.pl > [js] "drgniecie" zdjęcia

Pomoc - Szukaj - Użytkownicy - Kalendarz

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

MitS

10.03.2007, 20:53:05

Witam!

Mam problem z wykonaniem pewnego patentu w js... dam przykład co chce wykonać.
Jest taka strona http://www.templatemonster.com/flash-templates/13425.html i tam po najechaniu myszki te zdjęcie modelki szybko drgnie ale niestety taki patent wykonany jest w flashu a ja bym chcial taki patent wykonać w js... jak sie do tego zabrac

skowron-line

10.03.2007, 22:36:19

jedyne co mi przyszlo do glowy to moze po najechaniu na obrazek zeby margin sie zwiekszal a po odjechaniu sie zmniejszal do poprzedniej wielkosci to nie bedzie dokladnie to co jest tam ale bedzie dawac podobny efekt (chyba)

kwiateusz

10.03.2007, 23:26:59

ewentualnie po wjechaniu zwiększyć margin i po powiedzmy sek go usunąć efekt powinien być bardziej podobny

devnul

11.03.2007, 05:09:02

od cholery jest bibliotek od efektów specjalnych jquery, prototype moo.fx (czy tam mootols) a nawet starty polski alladyn - jak dobrze poszukasz to znajdziesz rozwiązanie tego problemu i będzie ono w stanie w 100% zrobic to co zaprezentowana animacja flash. powodzenia w poszuiwaniach - zacznij od google

MitS

11.03.2007, 10:26:49

ok dzieki za wszelkie informacje

najpierw rzeczywiście poszukam w google, ale gdybym nic ciekaweo nie znalazl to chyba bedzie trzeba pokombinować tak jak zaproponowaliście z zwiększaniem marginesu.

co do tego rozwiązania mam pytanie (na zapas)

Cytat

ewentualnie po wjechaniu zwiększyć margin i po powiedzmy sek go usunąć efekt powinien być bardziej podobny

jak można uzyskać efekt zalezny od czasu

?
Czyli np. robie jakieś powiększanie marginu w js i chcem by odczekał skrypt np. 1 sekunde i spowrotem zmienil margin.... to jak uzyskać te opoznienie czasowe

kwiateusz

11.03.2007, 10:31:49

setTimeout

dopowiada za uruchomienie kawałka kodu po x milisekundach

devnul

11.03.2007, 13:23:10

@mits: naprawde poczytj o którejs z tych bibliotek o których pisalem
to nie boli
visualjquery.com - genialnie rozwiązana dokumentacja do jquery - sama biblioteka jest względnie lekka w stosunku do tego co potrafi a potrafi dużo

siemakuba

12.03.2007, 00:37:00

Zaciekawiłeś mnie tym zadaniem :)
@devnull słusznie wskazał na jQuery. To mój faworyt jeżeli chodzi o biblioteki JS. Poza tym, po co robiś coś trudniej, kiedy można łatwiej :)

Taki efekt jak napisałeś można osiągnąć tak:

CSS:

Kod

#sample {
    margin:40px auto;
    border:5px solid #0F1317;
    cursor:pointer;
    width:416px;
    height:627px;
}

#sample.shock {
    border-color:#1A2126;
}

JS:

Kod

$(function(){

    $('#sample').mouseover(function(){
        $(this).width(426).height(637).addClass('shock').fadeTo(10,0.8).fadeTo(10,1);

        setTimeout(function(){
            $('#sample').width(416).height(627).removeClass('shock');
         }, 50);
    });
});

HTML:

[HTML] pobierz, plaintext 
<img src="./sample.jpg" id="sample">
[HTML] pobierz, plaintext

Przykład: http://kuba.websky.pl/pub/fphp/imageflicker/

P.S. W IE wygląda to cokolwiek pociesznie, ale przy trochę większej kombinacji da się pewnie to doprowadzić do porządku :)

pozdr.

MitS

12.03.2007, 14:54:28

witam

co do bibliotek to sobie poczytam, jeśli chodzi o settimeout to dzieki za link przyda sie ... trzeba troche poczytać

To co ty zaproponowaleś siemakuba jest swietne ... troche sie z tym pobawie i powinno być extra

Pozdrawiam wszystkich i dzieki za pomoc!

devnul

12.03.2007, 15:09:05

@siemakuba: troche OT ale nie devnull tylko devnul (moze być mylące -no ale

) też byś chyba nie chciał żebym pisał siemakóba albo jeszcze inaczej zamieniając inne litery czy też dodając własne i zabierając inne - bo wtedy to i nawet szatan by wyszło

siemakuba

12.03.2007, 15:36:33

Drogi devnul!
Najmocniej przepraszam za tę pomyłkę! :)

:)

pozdr.

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.