Jquery Rotate - Scale Plugin
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Rotate - Scale Plugin

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2614)
RAPOR ET
Bu dersimizde jquerynin rotate ve scale pluginini anlatacağım.Normalde css ile bunları animasyonlu yapaciliyoruz.Ama jquery de bunları animasyonlu şekilde kullanamıyoruz.Bazen bunları jquery ile animasyonlu şekilde yapmamız gerekebilir.O zaman bu plugini kullanabilirsiniz.

Şimdi kodlara geçelim.Öncelikle sayfamıza plugini dahil edelim.Örneğin içinde dosyayı verecem.

İndir: http://ustaderslik.com/dosya/jquery%20rotate-scale%20plugin.rar

$(".secici").animate({rotate: '360deg'},1000);
$(".secici").animate({scale: '2'},1000);


İlk kodumuz döndürme için.1 saniye içinde 360 derece dön dedik.
İkinci kodumuz büyütme için.1 saniye içinde boyutunu 2 ye katla dedik.

Kullanımı bu kadar basit.

Genel örnek :


<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript">
$(function(){

$('.kutu').mouseover(function(){
$(this).animate({rotate: '360deg'},2000).animate({scale: '1.5'},1000);;
});

});
</script>
<style type="text/css">
.kutu{width:200px;height:200px;background:Red;margin:auto;}
</style>
</head>
<body>

<div class="kutu"></div>

</body>
</html>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol