YAKINLAŞTIRMA ARACI

TEMELLERİ

Bu bir jQuery böylece ilk jQuery kütüphanesi yüklemek gerekir, eklenti, o zaman yakınlaştırma sahibi olmak isteyen alanda yeni fonksiyonu çağırmak, dosya eklentisi. Belirli bir HTML yapısı vardır ve bazı okumaya, bu yüzden doğru Tüm bu çalışmalar için gerekli CSS. Parametrelerin tam listesi de aşağıdadır.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/zoomer.jquery.js"></script>
<script type="text/javascript">
    $(function() {
               	
    	$("#wrap").anythingZoomer({
    	
    	   expansionSize: 30,
    	   speedMultiplier: 1.4
    	
    	});
    				
    });
</script>

HTML

Bir bakıştan alan beş bölümden oluşmaktadır. fikir "küçük" alan "büyük" yakınlaştırma alan farklı içeriği olan da dahil olmak üzere, her bölüm özelleştirme esneklik iyi bir miktar için izin vermektir.

Wrap (# wrap) - herşey gider.

Küçük Alan (# küçük) - varsayılan görüntülenebilir alanı, fare üzerinde yakınlaştırma söyledi.

(# büyük) Büyük - içerik Zoomer üzerinden izlenebilir.

Kaplaması (# overlay) - çevresinde fareyi takip yakınlaştırma kutusu.

Taşıyıcı (# taşıyıcı) - geniş bir alan ve kaplaması için bir şal.

Bu kimliği içine kilitli olmayan eklenti çağırırken, sonra geçersiz kılabilir.

<div id="wrap">
        
   <div id="small">
      <img src="images/rushmore_small.jpg" alt="small rushmore" />
   </div>

   <div id="mover">
        <div id="overlay-thing"></div>

        <div id="large">
            <img src="images/rushmore.jpg" alt="big rushmore" />                     
        </div>
   </div>
   
</div>

CSS

genişlikleri, yükseklikleri, sınırları ve bunun gibi şeyler ihtiyaçlarınıza göre değiştirilebilir. konumlandırma, z-index, taşma, ve üst / düzgün çalışması için burada olduğu gibi kalmalı sol değerleri.

#wrap          { width: 600px; position: relative; }
#small         { position: relative; width: 100%; }
#large         { background: white; position: relative; width: 600px; }
#mover         { position: absolute; top: 0; left: 0; width: 104px; height: 104px; overflow: hidden; z-index: 100; background: white; display: none; }
#overlay       { border: 1px solid blue; width: 102px; height: 102px; position: absolute; top: 0; left: 0; z-index: 200; }

TÜM PARAMETRELER

$("#wrap").anythingZoomer({
    	
      expansionSize: 30,      // How far outside the wrap edges the mouse can go
      speedMultiplier: 1.4,   // How much faster in the inside area moves than the mouse
      
      smallArea: "#small",    // Overrides small area ID
      largeArea: "#large",    // Overrides large area ID
      zoomPort: "#overlay",   // Overrides zoom overlay area ID
      mover: "#mover"         // Overrides mover ID
    	
});