JQERY:
JQERY bir javascript kütüphanesidir.Ya da farklı bir JavaScript Framework'üdür denebilir. jQuery yoğun olarak animasyonlarda kullanılır. Flash'ın alternatifi olarak kullanılan bu teknoloji ile Flash galeri, Tab menü, Sayfa geçişleri gibi birçok işlem yapılmaktadır.
ÖRNEK KOD:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
ul{width:950px; text-align:center;}
ul li{float:left;background:red; display:inline-block; margin: 5px; position:relative;}
</style>
</head>
<body>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
* {margin:0; padding:0;}
ul{width:950px; text-align:center;}
ul li{float:left;background:red; display:inline-block; margin: 5px; position:relative;}
</style>
</head>
<body>
<ul >
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<ul class="sirala">
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<button id="hide" >HIDE</button>
<button id="show">SHOW</button>
<button id="fadeout">FADEOUT</button>
<button id="fadein">FADEIN</button>
<button id="fadeto">FADETO</button>
<button id="slideup">SLIDEUP</button>
<button id="slidedown">SLIDEDOWN</button>
<button id="animate">ANIMATE</button>
<button id="each">EACH</button>
<script>
$('#hide').click(function(){
$('a').hide();
})
$('#show').click(function(){
$('a').show();
})
$('#fadeout').click(function(){
$('a').fadeOut('slow') ;
});
$('#fadein').click(function(){
$('a').fadeIn('slow') ;
});
$('#fadeto').click(function(){
$('a').fadeTo('slow') ;
});
$('#slideup').click(function(){
$('a').slideUp('slow') ;
});
$('#slidedown').click(function(){
$('a').slideDown('slow') ;
});
$('#animate').click(function(){
$('a').animate({
width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "1em", borderWidth: "5px" }, 1000 );
});
$('#each').click(function(){
$('li').each(function(index,element){
$(element).text("sirala"+index);
$(element).css("background-color","red");
});
});
var sayi=$('li').size(); alert(sayi);
</script>
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<ul class="sirala">
<li><a href="#" >ANASAYFA</a></li>
<li><a href="#" >HAKKIMDA</a></li>
<li><a href="#" >ILETISIM</a></li>
<li><a href="#" >URUNLER</a></li>
<li><a href="#" >HABERLER</a></li>
</ul>
<button id="hide" >HIDE</button>
<button id="show">SHOW</button>
<button id="fadeout">FADEOUT</button>
<button id="fadein">FADEIN</button>
<button id="fadeto">FADETO</button>
<button id="slideup">SLIDEUP</button>
<button id="slidedown">SLIDEDOWN</button>
<button id="animate">ANIMATE</button>
<button id="each">EACH</button>
<script>
$('#hide').click(function(){
$('a').hide();
})
$('#show').click(function(){
$('a').show();
})
$('#fadeout').click(function(){
$('a').fadeOut('slow') ;
});
$('#fadein').click(function(){
$('a').fadeIn('slow') ;
});
$('#fadeto').click(function(){
$('a').fadeTo('slow') ;
});
$('#slideup').click(function(){
$('a').slideUp('slow') ;
});
$('#slidedown').click(function(){
$('a').slideDown('slow') ;
});
$('#animate').click(function(){
$('a').animate({
width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "1em", borderWidth: "5px" }, 1000 );
});
$('#each').click(function(){
$('li').each(function(index,element){
$(element).text("sirala"+index);
$(element).css("background-color","red");
});
});
var sayi=$('li').size(); alert(sayi);
</script>
</body>
</html>
</html>
EKRAN ÇIKTISI:
HIDE Butonuna tıklandığı zaman:SHOW Butonuna tıklandığı zaman:
EACH Butonuna tıklandığı zaman:




Hiç yorum yok:
Yorum Gönder