Loading:

Promocja Helion.pl

Lupa po najechaniu na na obrazek myszką - Płynna animacja - JQuery

Skrypt tworzy płynną animację lupki pojawiającej się na zdjęciu po najechaniu na nie myszką.


Na początek musimy pobrać biblioteke JQuery z oficjalnej storny.

I dodajemy do naszej storny:

<script type="text/javascript" src="jquery.js"></script>

Oto nasza konstrukcja HTML:

  <div id="gallery2">
       <a href="obrazek01.jpg">
            <img src="obrazek01.jpg" alt="" />
        </a>
        <a href="obrazek02.jpg">
            <img src="obrazek02.jpg" alt="" />
        </a>
        <a href="obrazek03.jpg">
            <img src="obrazek03.jpg" alt="" />
        </a>
   </div>

 

 



Napisz Artykuł

Listing


//Kod JavaScript

<script type="text/javascript">
        $(document).ready(function(){
            $("#gallery2 a").append("<span></span>");
            $("#gallery2 a").hover(function(){
                $(this).children("span").fadeIn(600);
            },function(){
                $(this).children("span").fadeOut(200);
            });
        });
</script>


//Kod CSS

<style type="text/css">
        body {
                font-family:Arial, Sans-Serif;
                font-size:0.75em;
                }
       
        #gallery1 {
                width:100%;
                overflow:hidden;
                }
               
        #gallery1 a {
                position:relative;
                float:left;
                margin:5px;
                }
               
        #gallery1 a span {
                display:none;
                background-image:url(zoom.png);
                background-repeat:no-repeat;
                width:48px;
                height:48px;
                position:absolute;
                left:15px;
                top:15px;
                }
               
        #gallery1 a:hover span {
                display:block;
                }
               
        #gallery1 img {
                border: solid 1px #999;
                padding:5px;
                }
       
        #gallery2 {
                width:100%;
                overflow:hidden;
                }
               
        #gallery2 a {
                position:relative;
                float:left;
                margin:5px;
                }
               
        #gallery2 a span {
                background-image:url(lupa.png);
                background-repeat:no-repeat;
                width:48px;
                height:48px;
                display:none;
                position:absolute;
                left:15px;
                top:15px;
                }
               
        #gallery2 img {
                border: solid 1px #999;
                padding:5px;
                }
</style>


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=4925

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors