Hogyan kell ilyen előugró sávot programozni?
Ezen az oldalon van egy menü. Ha a bal oldali sáv fölé viszed az egeret, akkor előugrik egy kis animációval.
Itt tudjátok megnézni: [link]
válasza:Valami ilyesmi az elv:
1) megcsinálod azt a beúszó szürke dobozt HTML-ben
2) eltolod css-el balra -annyi pixellel, amilyen széles a dobozod (-annyi, tehát negatív értéket adj meg + position: absolute;)
3) javascriptben van egy eseménykezelő, amit úgy állítottak be, hogy ha a bal oldal látható sáv fölé viszed az egeret, akkor a nem látható (balra eltolt) sávot eltolja jobbra X pixellel ( left: -100px; -> left: 0px;)
ennyi
válasza:Az előző hozzászóló megoldásával az a legnagyobb probléma, hogy az ő megoldásával az eredmény nem animáció lesz.
Annyi nem elég, hogy pl. left:-100px; helyett onmouseoverre left:0px; az elem css tulajdonsága, mivel így semmi animációt nem fogsz látni.
Ehhez készíteni kell egy függvényt, ami onmouseoverre indul, és növekményes cilussal kell mondjuk, - ha már az előző válaszoló példájánál maradunk - , megoldani ez elem eltolását, úgy hogy elindítod -100-tól 0-ig, úgy, hogy a ciklusváltozó értékét eggyel növeled minden egyes lefutáskor.
onmouseoutra pedig meghívsz egy másik function()-t, ami a az előző function() éppen aktuális ciklusváltozójától indul és -100-ig csökken az értéke.
Ráadásul még késleltetést is kell használni /setTimeout()/, hogy animációként lásd az elem beúszását.
találtam hozzá egy plugint, csak ezzel 2 baj van. a chrome és az opera nem támogatja, és a beállításai szerint csak fentre meg lentre helyezhető nekem meg balra kellene. ha valaki a .js fájlt át tudná nekem írni hogy jó legyen akkor én is sokat tanulnék belőle mert én mindenhol átírtam a bottom-ot left-re, de nem az lett az eredmény amire vártam.
itt az oldal. ingyenesen letölthető:
válasza: válasza:<html>
<head>
<title>jquery menü</title>
<script src=" [link]
<style>
#menu {
position: absolute;
top: 0px;
left: -150px;
height: 100%;
width: 200px;
background-color:blue;
}
</style>
</head>
<body>
<div id="menu">aaa</div>
<script>
$('#menu').mouseover(function() {
$('#menu').animate({
left: 0
}, 1000, function() {
// Animation complete.
});
});
$('#menu').mouseout(function() {
$('#menu').animate({
left: -150
}, 1000, function() {
// Animation complete.
});
});
</script>
</body>
</html>
A menüt akárhogy formázhatod, csak a láthatóságért kék. Az időtartam 1000, ami azt jelenti, hogy 1 mp-ig tart. És kérlek írd át valid html-be :D
válasza:A .mouseout -ot cseréld ki .mouseleave -re,
a .mouseover-t pedig .mouseenter -re!
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!