Bu dersimizde jquery ile bir alanda gizli şekildeki içeriği mouse ile basılı tutuğumuzda daire içinde göstermeyle ilgili bir uygulama yapacağız.
Görüntüsü :
Eğer siyah alanda mouseyi basılı tutarsanı arkaplandakiler daire içinde gözükecektir.Basılı tutup hareket ettirirseniz göstermeye devam edecektir.
Kodlar :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
var kontrol=0;
$(".alan").mousedown(function(p){//eğer mouse ile sağ tık basılı ise
$(".kapla_orta").hide();//daireyi gizleyen alanı gizle
var gp=$(".kapla").offset(),//kapla alanın posizyonu
x=(p.clientX-gp.left)-(300+1450),//arkayı kaplayan alanın ortasını mouseye getirmek için önce left
y=(p.clientY-gp.top)-(150+850);//sonrada top değerini ayarlıyoruz.
$(".kapla").css({"left":x+"px","top":y+"px"})//bulduğumuz değerleri veriyoruz.
kontrol=1;//ve mouse hareket ettirilirse daireyi ortalama aktik etmek için değişkeni açıyoruz.
});
$(".alan").mouseup(function(){//mouseden elimizi çekersek
$(".kapla").css({"left":"-700px","top":"-400px"})//kaplayı eski pozisyonuna getir.
kontrol=0;//kontrolü kapa
$(".kapla_orta").show();//daireyi gizle
});
$( ".kapla" ).mousemove(function(p){//mouse alan üzerinde hareket ettirilirse
if(kontrol==1){//ve konrol açıksa
var gp=$(".alan").offset(),//koordinatları al ve mouseye göre ortala
x=(p.clientX-gp.left)-(1050),
y=(p.clientY-gp.top)-(600);
$(".kapla").css({"left":x+"px","top":y+"px"})//değerleri ata
}
})
})
</script>
<style type="text/css">
.alan{width:700px;height:400px;margin:auto;background:#f8f8f8;border:2px solid #ddd;margin-top:100px;position:relative;overflow:hidden;color:#666;font-size:26px;}
.kapla{width:2100px;height:1200px;background:url(http://u1312.hizliresim.com/1j/n/vq6v9.png) center no-repeat;position:absolute;top:-400px;left:-700px;}
.kapla_ust{width:2100px;height:550px;background:#000;position:absolute;left:0;top:0;}
.kapla_alt{width:2100px;height:550px;background:#000;position:absolute;left:0;bottom:0;}
.kapla_sol{width:1000px;height:100px;background:#000;position:absolute;left:0;top:550px;}
.kapla_sag{width:1000px;height:100px;background:#000;position:absolute;right:0;top:550px;}
.kapla_orta{width:100px;height:100px;background:#000;position:absolute;left:1000px;top:550px;}
</style>
</head>
<body>
<div class="alan">
<div class="kapla">
<div class="kapla_ust"></div>
<div class="kapla_alt"></div>
<div class="kapla_sol"></div>
<div class="kapla_sag"></div>
<div class="kapla_orta"></div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fermentum quam nibh, a venenatis eros ornare suscipit. Maecenas urna erat, bibendum et adipiscing ut, blandit sed metus. Proin ac magna viverra, condimentum elit at, feugiat ante. Suspendisse diam nisi, vehicula eu velit quis, rhoncus placerat risus. Maecenas ullamcorper ornare euismod. Morbi a mattis nisl, ut vehicula eros. Morbi ullamcorper venenatis nibh, eget volutpat mi sodales at. In gravida massa tortor, ut venenatis magna viverra in. Vivamus cursus elementum ipsum, egestas elementum dui pretium ac. Aliquam et lacus sem. Vestibulum venenatis est elementum, pellentesque magna vitae, interdum purus. Vivamus egestas neque sit amet mi iaculis, vestibulum sollicitudin odio gravida.
</div>
</body>
</html>
UstaDerslik
