Bu uygulamamızda, jquery ile nesneleri döndürme (rotation) üzerine bir uygulama yapacağız, jQuery, rotation için tam teşekküllü bir fonksiyona sahip değil, fakat rotation (Döndürme) üzerine eklentiler mevcut, bu animasyon uygulamamızda "jqueryrotate" eklentisini kullanacağız. Detaylar ve örnekler için proje sitesini ziyaret edebilirsiniz
Kullanımı gerçekten çok kolay ve en önemlisi IE6 sonrası IE tarayıcılarda da gayet iyi çalışıyor.
Burdaki uygulamamız biraz fantastik oldu, fakat siz bu eklentiyi website uygulamalarınızda, nesne üzerindeki olay tetiklemelerinde kullanabilirsiniz, "üzerine gelince dağılan veya dönen fotoğraflar mesela..."
Uygulama:
İlk önce proje sayfasına gidip eklentiyi indirin, sayfanıza ekleyin. ÖNEMLİ! eklentiyi jQuery'den sonra eklemeyi unutmayın
CSS yapısı:
#mill_bg{
background:url('mill_bg.jpg') no-repeat top center;
height:400px;
width:547px;
position:relative;
margin-left:20px;
}
#mill_rotate{
position:absolute;
top:82px;
left:166px;
}
HTML yapısı:
<div id="mill_bg">
<img src="mill.png" width="209" height="202" alt="" title="" id="mill_rotate"/>
</div>
JQuery yapısı:
<script type="text/javascript">
$(document).ready(function(){
var angle = 0;
setInterval(function(){
angle+=3;
$("#mill_rotate").rotate(angle);
},60);
});
</script>
Açıklamalar:
setInterval() ile değirmen pervanesini 3 derece artırarak "(angle+=3)" döndürüyoruz, "angle-=3" yaparsanız da ters yönde döner
ÖNEMLİ!: Değirmen pervanesinin dışındaki katmanın pozisyon değerini "relative" yaptık, pervanenin pozisyon değerini de "absolute" yaparak dış katmana göre konumlandırdık.
Kolay gelsin, görüşmek üzere...
