Jquery ile Minimaplı Harita Yapma
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 ile Minimaplı Harita Yapma

profil
cArleone
BEĞEN(2)
BEĞENME(0)
GÖRÜNTÜLENME(2403)
RAPOR ET
Bir ara geliştirmekte olduğum bir browser oyun için yaptığım bir minimap lı haritayı paylaşmak istedim.

Minimapım mantığı şu.Öncelikle mouse ile tıkladığında browserın büyüklüğünü alıp ana kısmın nerde durduğunu buluyoruz.Daha sonra Mousenın mini map üzerinde olup olmadığını buluyorum.Üzeinde ise minimapın köşesini 0 olacak şekilde mouse koordinatında çıkarıp çıkan sonucu 10 la çarpıyoz.Çarpanın sebebi büyük olan map küçüğün 10 katı olmasıdır.

Haritada scroll oynatıldığında bu sefer scrollun pozisyonunu alıp 10 a bölüyoruz mini maptaki pozisyonunu buluyoruz.

İndir : http://ustaderslik.com/dosya/harita.rar

Görüntüsü :


Kodlar :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnaSayfa</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function(){

$(".yresim").hide();

$(".navigasyon").live("mouseup",function(m){
var x=m.pageX;
var y=m.pageY;
var wg=($(document).width()-750)/2;
var sonuc=x-(wg+37);
var xsonuc=(sonuc*10)-250;
y-=25;
var ysonuc=(y*10)-250;
$(".nbuton").css({
"left":sonuc-15,"top":y-15
});
$(".harita").scrollLeft(xsonuc);
$(".harita").scrollTop(ysonuc);
});

$(".harita").scroll(function(){
var top=$(this).scrollTop()/10;
var left=$(this).scrollLeft()/10;
$(".nbuton").css({
"left":left+10,"top":top+10
});
});

$("#yol").click(function(){
$(".yresim").stop().toggle(500);
})

});

</script>

<style type="text/css">
body{color:#fff;font-size:18px;margin:auto;background-color:#383c51;font-family:"Comic Sans MS";color:#000;}

::-webkit-scrollbar {width: 20px;}
::-webkit-scrollbar-track {background: #f1f1f1; }
::-webkit-scrollbar-thumb {background: #f5b900;border-radius: 7px;-webkit-border-radius: 7px;-moz-border-radius: 7px;box-shadow:0px 0px 3px #000;-moz-box-shadow:0px 0px 3px #000;-webkit-box-shadow:0px 0px 3px #000;}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {height: 20px;display: block;background-color: #f5b900;}

.ana{width:750px;height:575px;background-color:#383c51;margin:auto;box-shadow:0px 0px 25px #f1f1f1;}

.harita{width:500px;height:500px;float:left;overflow:auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative; }
.hresim{width:1750px;height:1750px;background-image:url("harita.jpg");position:absolute;left:0px;top:0px;z-index:10;}
.yresim{width:1750px;height:1750px;background-image:url("yol.png");position:absolute;left:0px;top:0px;z-index:11;}

.naviana{width:250px;height:175px;background-color:#383c51;}
.navigasyon{width:175px;height:175px;background-image:url("navigasyon.jpg");margin:auto;position:relative;cursor:pointer;}
.nbuton{width:30px;height:30px;background-color:#f1f1f1;border:1px solid #333;position:absolute;top:0px;left:0px;opacity:.5}

.islem{width:250px;height:500px;background-color:#f1f1f1;float:left;}
.ibaslik{width:250px;height:25px;background-color:#f1f1f1;text-align:center;font-weight:bold;font-size:18px;}
.ibaslik2{width:250px;height:75px;background-color:#f1f1f1;text-align:center;font-weight:bold;font-size:18px;float:left;padding:25px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.islemler{width:250px;height:275px;background-color:#383c51;overflow:auto;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;color:#f1f1f1;font-size:18px;}
.buton{width:125px;height:30px;text-align:center;color:#383c51;font-size:17px;margin-top:5px;margin-left:5px;background-color:#f5b900;border:1px solid #f1f1f1;font-weight:bold;transition:color .5s;-webkit-transition:color .5s;-moz-transition:color .5s;border-radius:5px;font-family:"Comic Sans MS"; }
.buton:hover{color:#f1f1f1;cursor:pointer;}
.aciklama{width:500px;height:75px;float:left;color:#fff;}

.temiz{clear:both;}
</style>
</head>
<body>

<div class="ana">
<div class="islem">
<div class="ibaslik" style="background-color:#f5b900;">Dünya Haritası</div>
<div class="naviana">
<div class="navigasyon" id="navigasyon">
<div class="nbuton"></div>
</div>
</div>
<div class="ibaslik">İşlemler:</div>
<div class="islemler">
<button class="buton" id="yol">Deniz Yolları</button>
</div>
</div>

<div class="harita">
<div class="hresim"></div>
<div class="yresim"></div>
</div>
<div class="ibaslik2">Açıklama:</div>
<div class="aciklama">Dünya haritasına hoşgeldiniz.burdan seyehat edebilir veya yakındaki birlikleri gemileri ... görebilirsiz.</div>
<div class="temiz"></div>
</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