| Autor | Zpráva | ||
|---|---|---|---|
| Ruplahlava Profil |
#1 · Zasláno: 16. 11. 2012, 15:08:35
Ahoj, chci si na webu udělat (na spodku stránky) takovou blbinu, bude tam čouhat kousek hlavy a když na to někdo najede myší, tak vykoukne celá postavička.
Požít jquery slideIn téměř nejde, vypadá to škaredě když je to na obrázku, takže animate bottom. To by šlo postavička se mi hýbe, ale když se ji pokusím schovat pomocí pevné výšky divu, a následne overflow: hidden, tak to akorát do toho divu zajede... Nenapadá někoho jak to vyřešit? <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css" media="screen">
.redneckClass, .push{
height: 450px;
}
#redneck{
position: relative;
}
.redneckClass{
position: relative;
z-index: 3;
margin-left: 40%;
margin-top: 150px;
}
</style>
</head>
<body>
<div class="redneckClass"><img src="http://ruplahlava.eu/wp-content/themes/kozyvozy/img/redneck-sign.png" alt="redneck" id="redneck"></div>
</body>
<script type="text/javascript">
$('.redneckClass').hover(
function(){
$('#redneck').animate({bottom:370}, 1000);
},
function () {
$('#redneck').animate({bottom:0}, 1000);
});
</script>
</html> |
||
| Kcko Profil |
#2 · Zasláno: 16. 11. 2012, 19:30:19 · Upravil/a: Kcko
Ruplahlava:
Tohle Ti pomůže http://www.learningjquery.com/2009/02/slide-elements-in-different-directions PS. Jen v rychlosti (ale udělej dle předchozího linku) <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css" media="screen">
body
{
margin: 0;
padding: 0;
overflow: hidden;
}
#redneck{
position: absolute;
bottom: -300px;
height: 450px;
}
</style>
</head>
<body>
<img src="http://ruplahlava.eu/wp-content/themes/kozyvozy/img/redneck-sign.png" alt="redneck" id="redneck">
</body>
<script type="text/javascript">
$('#redneck').hover(
function(){
$(this).animate({bottom:-150}, 1000);
},
function () {
$(this).animate({bottom: -300}, 1000);
});
</script>
</html> |
||
| Ruplahlava Profil |
noo tohle už jsem viděl, udělat to s divama je jednoduchý a pomocí slide, ale s obrázkama to nevypadá dobře. Nakonec jsem se trošku probugoval přes css a animuju velikost vnějšího divu a jeho pozici zároveň a celkem to funguje :D
|
||
|
Časová prodleva: 14 let
|
|||
0