Loading:

Majówka Programisty! [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.hypot 2.strrpos() 3.bzerror() 4.print_r 5.is_link 6._x [AS 2] 7.ftp_delete 8.gzfile() 9.system 10.imagegif

56853.05

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>

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>