Hover'daki görüntüleri büyütmek için ZooMove jQuery eklentisi
Bir e-ticaret sitesine göz attıysanız, büyük olasılıkla görüntü yakınlaştırma efekti. Bir ürün fotoğrafını asılı tutarsınız ve görüntünün bu kısmı bir fotoğraf için büyütülür. daha net görünüm.
ZooMove eklentisi için harika bir yol bu etkiyi çoğalt Sitenizde. Onun jQuery tarafından desteklenmektedir, Böylece, çok fazla kod olmadan hızlı bir şekilde çalışmaya başlayabilirsiniz..
ZooMove tamamen ücretsiz ve açık kaynak kodlu GitHub'da meraklı geliştiriciler için. Aracılığıyla monte edilebilir npm, kameriye, İplik, veya doğrudan CDNJS.
ZooMove görüntüsü oluşturmak için üç özel dosya Sayfa başlığınızda:
- jQuery
- ZooMove CSS
- ZooMove JS
Her iki ZooMove dosyası küçültülebilir daha hızlı sayfa yüklenmesini istiyorsanız. Daha kolaysa, CSS dosyasını ana stil sayfanızda birleştirebilirsiniz..
Tüm gerçek sihir, yapabileceğiniz HTML'de gerçekleşir. HTML5'i ayarla data- * nitelikleri
farklı etkiler için.
Bu sizin zanaatınızı yaratmanıza kendi özel yakınlaştırma efekti dört farklı parametreye göre:
Veri hayvanat bahçesi ölçekli
- tanımlar gezdirirken toplam yakınlaştırma boyutu (örneğin,% 200 için 2.0)veri hayvanat bahçesi hareket
- Resmin olup olmadığını tanımlar imleç ile birlikte hareket ederVeri hayvanat bahçesi üzerinde
- Yakınlaştırılmış görüntüyü tanımlar orijinalin üzerinde görünmekveri hayvanat bahçesi-imleç
- tanımlar imleç noktası
Son bir beşinci parametre, neyin ne olduğunu tanımlamanıza olanak tanır. yeni resim URL'si olmalıdır (gerekirse).
ZooMove’i IE9 + dahil tüm tarayıcılarda kullanabilirsiniz. Bu eklenti yaygın olarak desteklenen ve bir kullanıcı deneyimi heck sunuyor.
Eğer arıyorsanız basit gezintiye yakınlaştır kütüphane ZooMove mükemmel bir seçimdir. Onun yeterince hafif herhangi bir web sitesinde çalıştırmak için jQuery tarafından desteklenmektedir, bu yüzden çalışabilmesi için kod yazmanıza gerek kalmayacak.
Daha fazla bilgi edinmek için ana sayfayı ziyaret edin ve GitHub hakkındaki belgelere bakın..