Figyelem! Nem egyszerű. Hogy lehetne ezt megcsinálni?
válasza:Különösebben nem értek a jqueryhez, de elméletet talán tudok mondani.
Csinálj egy functiont, ami bizonyos időközönként lefut, ez forgassa a png-ket máshol beállított sebességgel (azt hogy hány fokot forgassa). Ezt functiont futtasd le pl. 50-100 ms-enként valamilyen jquery timerrel.
Add meg a sebességek (hány fokot menjen egy "lefutáskor") változóit valahol a kód elején.
Ha az egeret ráviszed a legfelső divre (mouseenter/mouseleave vagy mouseover/mouseout) a sebességeket állítsd 0-ra, amikor kimegy állítsd vissza. Igazából írhatsz erre is egy reset functiont, amit lefuttathatsz az oldal betöltésekor.
válasza:Unatkoztam, és egy kicsit mégis értek hozzá... :D Gondolom IE alatt nem működik, Chromeban és Firefoxban igen. Apró hiba, hogy a forgó képek néha kilógnak a divből, és ha a kép kilógó részére viszed az egeret, akkor is megáll. De nem volt kedvem a CSS-el tökölni. Nem szép, de működik. Itt a kód:
<html>
<head>
<title>Jquery forgató izéke</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<style type="text/css">
#forgo {
margin: 30px auto;
padding: 0;
width: 100px;
height: 100px;
z-index: 0;
border: 1px solid black;
}
#img1, #img2, #img3 {
position: absolute;
}
#img {
z-index: 1;
}
#img {
z-index: 2;
}
#img3 {
z-index: 3;
}
</style>
<script type="text/javascript">
// állítsd be a sebességeket
var speed1 = 5;
var speed2 = 3;
var speed3 = 10;
// ha nem 0 foknál akarod kezdeni valamelyiket, írd át
var degree1 = 0;
var degree2 = 0;
var degree3 = 0;
// hány ms-enként ismételje? (50 felett már eléggé látható)
var interval = 50;
// ha betölt a honlap
$(document).ready(function() {
// lenullázza vagy visszaállítja a sebességet
function setspeed(iszero) {
if (iszero == 0) {
speed1 = 0;
speed2 = 0;
speed3 = 0;
} else {
speed1 = 5;
speed2 = 3;
speed3 = 10;
};
};
// ezt ismételgeti folyamatosan
setInterval( function() {
degree1 += speed1;
degree2 += speed2;
degree3 += speed3;
var rotate1 = "rotate(" + degree1 + "deg)";
var rotate2 = "rotate(" + degree2 + "deg)";
var rotate3 = "rotate(" + degree3 + "deg)";
$("#img1").css({"transform" : rotate1, "-moz-transform" : rotate1, "-webkit-transform" : rotate1});
$("#img2").css({"transform" : rotate1, "-moz-transform" : rotate2, "-webkit-transform" : rotate2});
$("#img3").css({"transform" : rotate1, "-moz-transform" : rotate3, "-webkit-transform" : rotate3});
}, interval );
// ha felette van az egér...
$("#forgo").mouseover(function(){
setspeed(0);
}).mouseout(function(){
setspeed();
});
});
</script>
</head>
<body>
<div id="forgo">
<div id="img1"><img src="1.png" alt="" /></div>
<div id="img2"><img src="2.png" alt="" /></div>
<div id="img3"><img src="3.png" alt="" /></div>
</div>
</body>
</html>
válasza:$("#img1").css({"transform" : rotate1, "-moz-transform" : rotate1, "-webkit-transform" : rotate1});
$("#img2").css({"transform" : rotate1, "-moz-transform" : rotate2, "-webkit-transform" : rotate2});
$("#img3").css({"transform" : rotate1, "-moz-transform" : rotate3, "-webkit-transform" : rotate3});
}, interval );
helyett:
$("#img1").css({"transform" : rotate1, "-moz-transform" : rotate1, "-webkit-transform" : rotate1});
$("#img2").css({"transform" : rotate2, "-moz-transform" : rotate2, "-webkit-transform" : rotate2});
$("#img3").css({"transform" : rotate3, "-moz-transform" : rotate3, "-webkit-transform" : rotate3});
}, interval );
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!