Jquery Tıklanan Alanı Daire içinde Göstermek
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 Tıklanan Alanı Daire içinde Göstermek

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2265)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/vq8uv.png

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>



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