1. JQuery "elastik slayt gösterisi" üzerindeki harika slayt gösterisi
Minyatürleri ve slaytların açıklamaları ile slayt gösterisi. Değişen görüntülerin çeşitli etkileri. İki seçenek vardır: otomatik slayt değişikliği ve olmadan.
2. Saf CSS3 kaydırıcısı
Tanım ve otomatik slayt değişikliği ile sevimli görüntü kaydırıcı. İmleci çizdiğinizde, rotasyon görüntü durur. Durdurma, CSS3 etkisi eşlik eder.
3. "PhotoRama" takma jquery
İyi galeri kaydırıcısı.
4. Metin efektleri "Tipografi Etkileri"
CSS3 ve JQuery ile tipografi ile çalışmak için ilginç etkiler. 7 farklı serin efekt.
5. Eklenti "DarkBox"
Görüntüleri açılır blokta görüntülemek için küçük bir ışık eklentisi.
6. jQuery üzerindeki vurgulu etkisi
Hovering yaparken dairesel efekt.
7. Animasyonlu JQuery CSS3 Düğmeleri
Siteniz için çarpıcı düğmeler oluşturmak için birçok farklı animasyonlu CSS3 efekti. Hovering yaparken sadece çok güzel efektler.
8. HTML5 jQuery arka plan görüntülerini değiştirme
Küçük resimleri tıkladığınızda, arka plan görüntüleri, bulanıklık etkisiyle birbirini değiştirir. Tarayıcı penceresi yeniden boyutlandırıldığında, arka plan görüntüsünün boyutu değiştirilir.
8. Etkileşimli Tipografi Etkileri
HTML5 ve JQuery (4 farklı efekt) kullanılarak ilginç metin efektleri. Efekti görmek için metnin üzerinde fare.
9. Pop-up görüntü imzaları
Pop-up görüntü imzalarını uygularken birçok farklı animasyonlu efekt.
10. Eklenti "Portamento"
JQuery'de yüzen blok. Sayfayı aşağı kaydırırken her zaman görünürlük bölgesinde kalır.
11. İçerik Scrollers
sabit boyut bloklarında kaydırmayı görüntülemek için jquery eklentisi. Birkaç stil süslemeleri.
12. Eklenti "Scrollbars"
sabit boyut ünitesindeki içeriğin yatay ve dikey kaydırılmasının jquery uygulaması.
13. "Tiny Scrollbar" eklentisi
İçeriğin dikey ve yatay kaydırılmasını uygulamak için jquery eklentisi.
Demo
İndirmek
14. "JSCROLLPANE" eklentisi
Bloktaki tarayıcı kaydırma içeriğini çaprazlayın.
15. Yüzer blok "Kaydırma"
Sayfanın kaydırılmasından sonra kaydıracak bir blok oluşturmak için eklenti. Bloğu bağlantıyı tıklatarak düzeltmek mümkündür.
16. Pop-up panelleri "kenar çubuğu"
Web sayfasının her tarafından panelleri çalıştırın.
17. Plug sayfası için muhteşem CSS3 Çözümleri
Animasyonlu etkilerin uygulanması için üç seçenek "Geliştirmede Site" oluşturmak için.
17. Sayfayı kaydırırken etkisi
Şaşırtıcı etki Sayfayı kaydırırken: Elementler ekranın arkasındaki alandan ayrılır veya tam ekran alanının arkasına saklanıyor. Böyle bir çözüm, portföy sitelerinde kullanmak için mükemmeldir, tamamlanmış projelerin muhteşem bir sunumu için kısa bir açıklama ile.
19. "Fancybox 2" eklentisi
Modal pencerelerde görüntüleri ve diğer içeriği görüntülemek için birçok eklenti tarafından belirtilen fancybox'un yeni, tamamen yeniden yazılmış bir sürümü.
20. Minimit Gallery.
Büyük bir özelliğe sahip fonksiyonel eklenti: galeri, atlıkarınca, kaydırıcı, menü, genişletici, animasyonlu düğmeler.
21. JQuery News Ticker
Sitede Rotator Haberleri. Mesajlar birbirlerini değiştirir ve yazdırılan makinenin ilginç bir etkisi kullanılarak görünür. "Duraklat" düğmesine tıklayarak haberleri değiştirmeyi durdurabilirsiniz. Kartvizitler bir mesajdan diğerine taşınabilir.
22. Uyarlanabilir görüntüler.
Ekran için ölçeklenebilir görüntüler mobil cihazlar. Görüntü boyutları pencere boyutuna bağlıdır. İkinci el teknolojiler: javascript ve php5.
23. VSCroller.
Dikey JQuery, CSS3 Scroller. Kaydırma hızı ve gecikme süresi ayarlanır.
24. Çok seviyeli açılır menü "jqsimplemenu"
Sitede çok seviyeli yatay açılır menü oluşturmak için taze jquery eklentisi.
25. "Jscarousel 2.0"
dikey ve yatay carouseller uygulamak için jquery eklentisi.
26. Rotator "Dinamik Haberler"
rSS şeritinden en son haberlerin güzel görüntüsü için jquery eklentisi.
27. Animasyonlu Menü
Menü öğesinde gezinirken animasyonlu etki.
28. Animasyonlu metin efekti
İle çalışmanın üç muhteşem örneği CSS özelliği "Background-Clip: Metin". CSS3 Efekt, eski tarayıcılarda çalışmaz.
29. CSS3 JQuery Bulanıklık Etkisi
İmleci bloğa getirdiğinizde artar ve metinle kalan bloklar arka planda bulanıklaşır.
30. CSS3 JQuery Pop-up İpuçları
31. JQuery Pop-up Hovering İpuçları
32. Easy CSS Menüsü
33. Notlar CSS3 ve HTML5
Scrapbook'lara benzer blokların uygulanması.
34. RLIGHTBOX.
Pop-up bloklarında bir medya sistemini görüntüleme: Görüntüler, Video, Flash.
35. JQuery Zumber
Kare bölgeyi arttırın.
36. CSS3 JQuery Image Açıklama
Pop-up görüntü açıklamalarını uygulamak için "tabanlı sürgülü kapı içerik galerisi" takılması. İmleci, sunulan görüntülerden bazılarına getirdiğinizde görünür. kısa Açıklama Tam makaleye referansla. Hover: Garaj kapıları yükseltmenin etkisi.
37. "Önce ve Sonra" JQuery Fişi "Ucompare"
Perdeyi düşünerek, iki görüntüyü birbirine üst üste bindirebilirsiniz. Sayfadaki herhangi bir şey için iki seçenek düzenlemeniz gerektiğinde bu durumlar için idealdir: Önce ve sonra.
38. Görüntü Rotasyon Etkisi
39. Huzur ve Avrupa ve ABD'nin etkileşimli haritaları
40. Slayt gösterisi "Slider.js v1.1"
Slaytlar arasında birkaç farklı animasyonlu geçiş etkisi.
1. "Hover Zoom" takma jquery
İmleci zoom etkisini kullanarak imgülle çizerken görüntülerin açıklamasını uygulamak için orijinal çözüm.
2. "CAPTIFY" fişi
3. Galeride JQuery Image Açıklama
İmleci vurduğunuzda, bir açıklama görünür ve resmin kendisi, belirli bir renk olan yarı saydam bir katmanla dökülür.
4. Görüntü imzalarının jquery uygulaması
Fare imlecini taşırken görünen görüntüler için imzaların birkaç düzenlemesi.
5. Sürgülü kapıların jquery etkisi
Bir minyatüre ulaştığınızda, bir açıklama yerinde görünür.
6. jquery fişi "zoomInfo"
İmleci görüntüye vurduğunuzda, bu azalır ve fotoğrafın adı ve açıklaması görünür.
7. JQuery fişi "mozaik"
Fare imlecini gezdirirken açılır görüntü açıklamalarının uygulanması. 8 farklı pop-up imzası türü sağlanmaktadır. Onları demo sayfasında görebilirsiniz.
Fare imlecini görüntüye vurduğunuzda, ayrıntılı bilgilere referansla kısa bir açıklama bırakır.
9. Görüntü imzasını uygulamak için eklenti
İmleci gezdirirken açılır görüntü imzalarını uygulamak için başka bir seçenek. İki arasından seçim yapma fırsatı var jquery etkileri İmzaların ortaya çıkması.
10. "Önizleme penceresi" görüntüsünün açıklaması
İmza görüntüleri için eklenti. Fare imlecini animasyonlu bir efektle vurduğunuzda, bir açıklama belirir. JQuery animasyon oluşturmak için kullanılır.
Malzemelere dayanarak hazırlanan
jQuery eklentileri, bir site oluştururken en gerekli bileşenler arasındadır ve gerçekten herhangi bir web uygulaması arasındadır. İşlevselliğinizi genişletmenize izin verir. Bu makale, 2012 yılında en faydalı eklentileri listeler. Daha fazlası için uygun arama tüm eklentiler aşağıdaki kategorilere ayrılmıştır: Web sayfası düzeni - eklentiler, navigasyon için etiketler, form eklentileri, sürgü oluşturmak için eklentiler, çizelgeler ve grafikler için eklentiler, görüntüler ve diğerleri için efektler. Ayrıca, bu eklentiler arasında, uyarlanabilir uygulamalarınızı oluşturmanıza yardımcı olacak eklentileri vardır.
Sayfa Düzeni Eklentileri
equalize.js, sitenin bir blok yapısı oluşturmanıza olanak sağlayan bir jquery eklentisidir. Herhangi bir öğenin yüksekliğini ve genişliğini sevmenizi sağlar.
Uyarlanabilir düzenler için yeni eklenti. Özetile, herhangi bir boyutta öğeler oluşturmanıza izin verirken, ızgara sütunlarının sabit bir boyutu oluşturma ihtiyacı ortadan kalkar.
GRIDSTER.JS, sürükle ve bırak - ızgara inşa etmek için jquery eklentisi. Ayrıca kullanmak dinamik olarak silinebilir ve ızgaradan öğeleri ekleyebilir.
Zoomooz.js. - Bu, web sayfasının herhangi bir elemanını artırmak için kullanımı kolay bir jquery-eklentisidir. Herhangi bir HTML öğesine "zoomTarget" sınıfını ekleyerek kolayca bir zoom efekti ekleyebilirsiniz. Artış sayfaya tıklayarak sıfırlanabilir. Eklenti test edildi Internet Explorer. 9, Safari 3 +, Firefox 3.6 +, Opera ve Chrome.
Wookmark, dinamik bir multisount şablonu oluşturmak için bir eklentidir.
jQuery Hiddenposition, gizlenmiş olsa bile, herhangi bir öğeyi eklemenizi sağlayan bir eklentidir.
Stellar.js - Paralaks'ın öğeler için etkisini sağlayan jquery-eklentisi.
Kesitler arasındaki geçiş sırasında, sayfaların gerçek saygısızlığının etkisini ekleyen jquery eklentisi. Kullanılmış donanım ivmesi. Tabletler ve akıllı telefonlar üzerinde çalışır.
Adaptif tipografi için eklenti. Mükemmel yazı tipi boyutunu oluşturan seçiciyi kullanmanızı sağlar.
Tüm olası dönüşümler dahil olmak üzere sitede animasyonlu hareketler oluşturmanıza olanak sağlar.
Navigasyon için eklentiler
Horizontalnav, yatay menüyü uzatan bir jquery eklentisidir, böylece kabın tüm genişliğine karşılık gelir. Şimdiye kadar gezinme menüsünün doğru geriliminin etkisini oluşturmaya çalıştıysanız CSS konteyneri Proje, çapraz tarayıcı uyumluluğu için ne kadar zor olduğunu kesinlikle biliyorsunuz. Bu eklenti kolayca yapar.
stickymojo, jQuery'de kolay, hızlı ve esnek bir eklenti "lipuchy" yan panelidir. Firefox, Chrome, Safari ve IE8 + ile çalışır (iyi eski versiyonu desteklemektedir).
dDSLick, görüntüleri ve açıklamalarıyla açılır menüler oluşturmanıza olanak sağlayan bir eklentidir.
Aşağı açılır panellerin basit bir organizasyonu için eklenti. Eklenti, panellerin durumunu depolamak için çerezlerle çalışmayı destekler. Seçenekler arasında, bölümlerin açılış ve kapama işlemini yapılandırmak için referans işlevleri vardır.
Sınırlı bir alanda veri içerebilecek katlama blokları oluşturmak için eklenti.
Eklentiler oluşturma
Eklenti, şifrenin karmaşıklığı seviyesini belirlemenizi sağlar.
JQuery-eklentisi, dosya indirme işlemini görselleştirmek için. Sürükle ve bırakmayı destekler ve fotoğraflar için anında önizlemeler oluşturur.
Kredi kartı numaralarını belirleyen ve kontrol eden eklenti. Kredi kartı türünü belirlemenizi sağlar.
Verileri filtrelemek için eklenti. Verileri etikette ve birkaç etiket ve kategori için filtreleyebilirsiniz.
Girişi kontrol eden eklenti e-posta Hazırlanmış listenin doğruluğunda (burada en popülerleri ekleyebilirsiniz. posta hizmetleri Mail.ru, yandrex.ru, gmail vb.).
Sürgü ve atlıkarous oluşturma için eklentiler
Fare, Dokunmatik Yüzey ve Klavye kullanarak geçişleri kontrol etmenizi sağlayan eklenti. Varsayılan olarak ayarlanan geçişler için, kaynak dosyada olan ek ekleyebilirsiniz.
iossLider.
iOSSLider, adaptif bir çapraz tarayıcı kaydırıcısı için bir eklentidir.
Rslider - Tam Ekran adaptif kaydırıcı. HAKKINDAh Ekran genişliğinize otomatik olarak adapte olur.
Fresco adaptif bir benzeri kutu eklentisidir. Tüm tarayıcılarda, tüm cihazlarda, tüm tarayıcılarda mükemmel bir şekilde çalışan çarpıcı yerleşim programları oluşturmak için kullanılabilir.
Bookblock: eklenti çevirme içeriği
Bookblock, "Sayfalar" gibi navigasyon oluşturmanıza izin veren kitapçıklar şeklinde bileşenler oluşturmak için kullanılabilecek bir jquery-eklentisidir. Burada herhangi bir içerik kullanabilirsiniz, görüntü veya metin olabilir. Eklenti yapıyı yalnızca gerekirse (başka bir deyişle, yalnızca sayfa devraldığında) ve gerçekçiliği sağlamak için örtüşen ve gölgeleri kullanır.
Adaptör, slaytların güzel bir 2D veya 3B hizalama animasyonu oluşturmak için geliştiricilere basit bir arayüz sağlayan kolay bir içerik kaydırıcısıdır. Halen, Webkit ve Firefox tarayıcılarında 3B özellikler için destek var. Tüm 2B geçişler IE6 + ve diğer modern tarayıcılarda test edildi.
Birkaç faydalı özelliğe sahip sürekli atlıkarınca.Eski tarayıcıları bile yapılandırmak ve desteklemek kolaydır.
Rhinoslider. - oldukça esnek jquery. Eklenti slayt gösterisi. Sadece çeşitli etkiler sunulmaz, ancak kendi stillerini, etkilerini ve işlevlerini kaydırıcıya eklemek mümkündür.
Sıra, içeriği orijinal şekilde kaydırmak için bir jquery-eklentisidir ve size tam kontrol sağlar. Herhangi bir içeriği kullanabilirsiniz; Sonsuz şekilde kaydırılır. Burada anlamsal işaretleme, ayrıca dokunmatik teknolojiye dayalı uyarlamalı şablonlar ve cihazlar kullanılır.
Glisse.js basit, adaptif ve kolay özelleştirilebilir bir jquery fotoğraf galerisidir.
Grafikler ve grafikler için eklentiler
Morris.js, çizim zamanlama programlarını kolaylaştırmak için jquery ve raphaël kullanan hafif bir kütüphanedir.
JQuery Org Grafiği, iç içe geçmiş elemanlarla ağaç yapıları oluşturmanıza olanak sağlayan bir eklentidir. Veriler, eklentiyi kullanımı kolay hale getiren katıştırılmış düzensiz bir listeye girilir.
Tipografi için eklentiler
Bacon.js, metni Bezier veya Çizgi eğrisinin etrafına sarmanıza izin veren bir jquery eklentisidir.
Textualizer - Metin üzerinde güzel efektler oluşturmak için jquery eklentisi. Desteklenen İşler: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,0, Opera 10.6+, Mobil Safari (iOS 4)
SlabText, mevcut alanı yatay olarak doldurmak için her satırın boyutunu değiştirmeden önce başlıkları parlatan çok kullanışlı bir jquery-eklentisidir.
trunk8 jQuery'deki bir metin trigtele eklentisidir. Ön inceleme için büyük bir metin bloğunu daha küçük bir parçaya kesmenizi sağlar.
Görüntüler için çeşitli efektler oluşturmak için eklentiler
Bu, eğim etkisi oluşturmak için CSS3 filtreleri kullanan bir jquery eklentisidir.
Adaptif görüntülerin etkisini uygulamak için eklenti.
jQuery eklentisi, görüntü kartları oluşturmayı kolaylaştırır. Bu araçla, herhangi bir harita görüntüsü vurgulanabilir veya seçilebilir, ayrıca kart kontrol edilebilir. farklı yollar. Internet Explorer 6 da dahil olmak üzere tüm büyük tarayıcılarda çalışır, flaş kullanmaz ve jQuery'den başka bir şey gerektirmez. Bazı gelişmiş efektler HTML5 desteği gerektirir, ancak yine de eski tarayıcılarda çalışacaktır.
Adaptif, ya da isterseniz, duyan web tasarımı artık başka bir tasarımcı eğilimi değil, bu zaten, web sitelerinin evrenselliğini, çeşitli kullanıcı cihazlarının ekranlarında uyumlu görsel algısını sağlamak için zaten belirli bir standarttır. Daha yakın zamanda, geliştirildiğinde uyarlanabilir şablonGenel tasarım stilini kırmadan bazı sürgü ve görüntü galerilerinin entegrasyonunda çeşitli zorluklarla uğraşmak zorunda kaldım. Şimdi her şey çok daha kolay, ağda çok sayıda hazır çözüm var ve özellikle de memnun olan, çoğu açık kaynağı olan ücretsiz erişimde.
Önerilen araçların çeşitliliği nedeniyle, en son zamanlarda ortaya çıkan ve herhangi bir kısıtlama olmadan dağıtılan ve herhangi bir kısıtlama olmadan dağıtılan görüntülerin adaptif jquery kaydırıcılarının en önemli gelişmelerinin küçük bir incelemesini derlerdim. Tamamen ücretsiz.
Vay kaydırıcı.
Görüntülerin uyarlanabilir jquery görüntüleri muhteşem bir set ile görsel efektler (dönüşler, gidiş, bulanıklık, spiraller, güneşlikler vb.) Ve birçok hazır desen. Wower'da yerleşik ekleme sihirbazının yardımı ile, dakikalar içinde kolayca ve kolayca çarpıcı slayt gösterileri oluşturabilirsiniz. Geliştiricinin web sitesi, tıkanıklık ve takma işleminin mükemmel yaşam örnekleri, eklentinin ayarlanması ve kullanımı hakkında gerekli tüm belgelere sahiptir. Ayrıca ayrı indirmek için de kullanılabilir eklenti wordpress Ve Joomla için modül. Birçoğunun bu harika kaydırıcıyı, hem yeni başlayanlar hem de rehber bir Web'den hoşlanacağına eminim.
Hislider.
HTML5, JQuery Slider ve Image Galerisi, Popüler sistemler çalışan sitelerde kişisel kullanım için kesinlikle ücretsiz eklenti - WordPress, Joomla, Drupal. Bu basit, ama oldukça işlevsel bir araçla, sitelerimizin sayfalarında, şaşırtıcı ve parlak slayt gösterileri, muhteşem sunumlar ve yeni mesajların duyurularını kolayca oluşturabilirsiniz. Bir kaydırıcı, çarpıcı geçiş efektleri (değişim) içeriği, çeşitli multimedya içeriğinin çıktısı:, YouTube ve Vimeo, Esnek Özel Ayarlar, vb.
Nivo kaydırıcı.
Nivo Slider, görülenlerin en güzel ve kullanımı kolay olanlardan biri olan herkes tarafından iyi bilinen eski kibardır. JQuery Nivo Slider eklentisi, MIT lisansı altında dağıtılmış, indirmek ve daha fazla kullanmak ücretsizdir. WordPress için ayrı bir eklenti de var, ancak ne yazık ki zaten ödenmiş ve bırakma lisans başına 29 dolar olacak. WP tema dosyalarıyla biraz daha yapmak ve Nivo Slider eklentisinin ücretsiz jquery sürümünü blogunuza sabitleyin, bilginin faydası, ağda nasıl yapılır.
İşlevsel olarak gelince, her şey mükemmel bir sırayla. Bir jquery v1.7 + kütüphane iş, güzel geçiş efektleri, basit ve çok esnek ayarlar, adaptif düzeni, otomatik görüntü kesme ve daha fazlası için kullanılır.
Kaydırıcının fikri, birçok küçük eşyanın (resimler), animasyonun basit bir etkisi ile seçilen kategoriye tıklamaya devam ettiği, Apple ürünlerinin tüm tarzında iyi bilinen geliştiricilerden ilham aldı. Codrops, bu kaydırıcıyı oluşturmak için detaylı bir ders, HTML İşaretleme'nin tam hizalamasını, bir dizi CSS kuralları ve yürütülebilir jquery eklentisinin yanı sıra bir kaydırıcı kullanmanın harika bir örneğini sunar.
Yarık kaydırıcı.
Tam ekran görüntü kaydırıcısı JQuery ve CSS3 + Detaylı ders kitabı eklentinin sitesinde entegrasyonunda ayrıntılı ders kitabı. Fikir, bir sonraki veya önceki içeriğe geçerken açık akım kaydırağı belirli bir içerikle kesmektir. Dan jQuery kullanarak. Ve CSS animasyonları, slaytlar arasında benzersiz geçişler oluşturabilirsiniz. Kaydırıcının uyarlanabilir düzeni, ekranlara eşit derecede iyi görünmesini sağlar. farklı şekiller Özel cihazlar.
Elastik içerik kaydırıcısı.
İçeriğin, bulunduğu ana kabın boyutuna bağlı olarak otomatik olarak genişlik ve yükseklikte ayarlanan içeriğin kaydırıcısı. JQuery ayarlarında oldukça basit tasarım ve esnek kaydırıcı, alttaki navigasyon ile, ekran boyutunu azaltmaya kadar değiştirirken, navigasyon simgeler olarak görüntülenir. Çok ayrıntılı belgeler (ders yaratma) ve kullanım örnekleri.
3D Yığın Kaydırıcısı.
Bir kaydırıcının deneysel versiyonu bir 3D düzlemden geçişlerle görüntüler gösteren görüntüler. Görüntüler, navigasyon okunu kullanarak iki yatay yığın halinde kırılır ve sonraki resmi görüntüleme durumuna geçer. Genel olarak, özel bir şey yok, ancak bu fikir ve yürütme tekniği oldukça ilginç.
Çok basit,% 100 uyarlanabilir ve tam ekran jquery görüntülerin kaydırıcısı. Kaydırıcının çalışmaları, JQuery Magic'li bir paketteki CSS geçişlerine (özellik geçişi) dayanmaktadır. Maksimum genişlik değeri% 100 varsayılan olarak monte edilir, bu şekilde, ekran boyutlarına bağlı olarak resimlerin boyutu değiştirilecektir. Hiçbir şey tasarımda özel animasyon efektleri ve lezzetleri, her şey basittir ve kesintisiz çalışmaya keskinleştirilir.
Minimal Slaytlar
Adı kendisi için konuşur, belki de tanıştığım görüntülerin en hafif ve minimalist jquery kaydırıcılarından biridir (1kb'de eklenti). SorumlularLides.js. Korna jquery eklentisi, bu konteynerin içindeki elemanları kullanarak bir slayt gösterisi oluşturur. IE'nin tüm sürümleri dahil, IE6 ve daha yüksek olan tüm sürümleri dahil olmak üzere çok çeşitli tarayıcılarla çalışır. Kağıt, CSS3 geçişlerini, güvenilirlik için JavaScriptli bir pakette kullanır. Sıralanmamış bir listeyi kullanarak basit bir işaretleme, geçişler ve zaman aralıkları, otomatik ve manuel kontrol Slaytları değiştirme, ayrıca birkaç slayt gösterisi için destek. Bu çok frisky "bebek".
Kamera.
Kamera - Ücretsiz jquery. Sitelerin sayfalarında bir slayt gösterisini düzenlemek için eklenti,% 100 adaptif düzeni ve çok sayıda geçiş efektine sahip bir ışık kaydırıcısı ve çok basit ayarlar. Herhangi bir kullanıcı cihazının ekranlarına harika bir şekilde uydurun (PC monitörleri, tabletler, akıllı telefonlar ve cep telefonları). Yerleşik videoyu gösterme yeteneği. Düğmeleri ve görüntülerin bloklarını kullanarak otomatik slayt değiştirme ve manuel kontrol. Pratik olarak kompakt tasarımda resimlerin tam bir galerisi.
bxslider jquery.
Diğeri, jquery üzerinde oldukça basit bir uyarlanabilir kaydırıcı. Slaytlarda, herhangi bir içerik, video, resim, metin ve diğer öğeleri yerleştirebilirsiniz. Duyusal ekranlar için genişletilmiş destek. CSS-Animation geçişlerini kullanın. Slayt gösterileri ve kompakt görüntü galerilerinin sunumunda çok sayıda farklı varyasyon. Otomatik ve manuel kontrol. Küçük resimleri seçerek düğmeleri kullanarak slaytları değiştirme. Kaynak dosyanın küçük boyutu, ayarlarda ve uygulamada çok basittir.
FlexSlider 2.
FlexSlider 2 - Güncellenmiş versiyon Aynı ismin kaydırıcısı, daha iyi bir yanıt oranı, bir komut dosyası bakanlığı ile ve Ticaret / yeniden çözünürlüğü en aza indirgemek. Eklenti, küçük resimlerin, sol-sağdaki yerleşik okları, dahili okları ve alt navigasyon bölmesini düğmeler şeklinde kontrol eden bir temel kaydırıcı içerir. Video slaytlarında (Vimeo), esnek parametrelerin (geçişler, tasarım, zaman aralığı), tamamen uyarlanabilir düzende çıkış yapma yeteneği.
Galleria.
İyi bilinen ve oldukça popüler adaptif eklenti Yüksek kaliteli galeriler ve görüntülerin kaydırıcıları oluşturmak için jquery. Kaydırıcı arayüzü, kontrol paneli sayesinde, her zamanki video oynatıcıya görsel olarak benzer şekilde, eklentinin bileşimi birkaç farklı süslemeyi içerir. Gömülü video ve görüntüler popüler Hizmetler: Flickr, Vimeo, YouTube ve diğerleri. Ayrıntılı belgeler Kurarak ve kullanırken.
Yabanmersini.
Fırfırlar olmadan basit görüntüler, özel olarak adaptif web tasarımı için yazılmış ücretsiz jquery kaydırıcı. Yabanmersini deneysel bir jquery açık kaynaklı eklentidir. Minimalist tasarım, efekt yok, yalnızca belirli bir süre sonra birbirlerini değiştirerek pürüzsüz bir şekilde açılır. Her şey çok basit, koydum, bağladım ...
jQuery Popeye 2.1.
Lightbox elemanları ile çok kompakt jquery görüntü kaydırıcı. Esnek boyutları nedeniyle, fare imlecini vurduğunuzda veya genişletilmiş bir resim ve kontrol elemanları ile hangi Lightbox'un etkinleştirildiğini tıklattığınızda, minyatür biçiminde herhangi bir kaba herhangi bir kaba katıştırılmıştır. Ürün veya haber duyurularının sunumu için böyle bir kaydırıcıyı yan panellerde yerleştirmek uygundur. Çok miktarda bilgiye sahip siteler için mükemmel çözüm.
Sıra
Genişletilmiş CSS3 geçişlerine sahip ücretsiz adaptif kaydırıcı. Minimalist stil, 3 dekorasyonun 3 temaları, resmin ortasında görünen yatay yöndeki her bir çerçeve slaytları sola, sağa imza, minyatürler sağ alt köşede çoğaltılır. Her çerçevede görüntülemek için ürün sunum sayfalarının kırılması. Kontrol ayrıca ileri geri düğmeleri içerir. Hepsini desteklemek modern tarayıcılar.
TOKATLAMAK.
Resimlerin tamamen tanıtım kaydırıcısı ve işlevsellik ve ayarlar üzerinde, ayarlardan, kaydırma değişikliğinin hızında bir değişiklik vardır, manuel modu (kontrol düğmeleri etkinleştirilir), sürekli slayt gösterisi. Bu kaydırıcıya sahip olma hakkına sahiptir ve bu beni yalnızca bu gelişmede ilginç bir şey bulamadım, kötü bir şekilde aradım)))))
Duyarlı görüntü kaydırıcısı.
Vladimir Kudinovov'dan görüntülerin güzel bir adaptif kaydırıcısı. Görsel örnekler ve oluşturma, yükleme ve kullanma için ayrıntılı talimatlar ile birlikte iyi, son derece gelişmiş bir araç. Uyarlanabilir TasarımSevimli düğmeler ve yeşil atıcılar, her şey oldukça sevimli ve sakince, baskı olmadan.
Kesirli kaydırıcı.
Görüntüler ve metin slaytları için paralaks efektli ücretsiz jquery kaydırıcı eklentisi. Slayt animasyonu, her seferinde ve animasyon parametresinde tam kontrollü birkaç gösteri değerine sahiptir. Slaytta birkaç elementle bir kerede animasyon yapabilme. Ayarlayabilirsiniz Çeşitli metodlar Animasyonlar, slaytların veya geçişlerin belirli bir yönden kaybolması. Otomatik ekran ve manuel kontrol Navigasyon oklarını kullanarak açılırken açılır. Slaytların görünümünün 10 türleri ve çok daha fazlası ...
İnceleme oldukça kapsamlı, ancak dikkate alınan çok sayıda ürün nedeniyle yeterli bilgilendirici değildi. Tüm detaylar ve ayrıntılı açıklamalar. fonksiyonellik Bir eklenti, doğrudan geliştiricilerin sayfalarını öğrenebilirsiniz. Birinin, sitelerinin sayfalarında renkli resim kaydırıcıları oluşturmak için en gerekli aracı aramayı kolaylaştırmasını umuyor.
Rusya Şablonları ile çalışabilmek güzel olacağını hiç düşündün mü? Sadece bir dakika düşün. İngilizce-dil şablonları ile çalışmak için zaman harcaması yok. TemplateMonster'ın şimdi TemplateMonster Marketer'da bulunabileceği gerçeğiyle sizi memnun ediyoruz. Her biri için metin manuel olarak yazılmıştır. Ve elbette, tüm bitmiş çözümlerin kullanımı inanılmaz derecede kolaydır.
Her saygı ile Andrew
Tarayıcılar, Web yöneticileri özniteliğe reçete edildiğinde açılır pencereler oluşturur. başlık Herhangi bir metin (kural olarak, nitelik başlık Etiketlere uygulanır
ve
. Bağlantılara ve görüntülere). Kullanıcılar fare imlecini özniteliğin bulunduğu etiketlere getirdiğinde başlıkTarayıcı açılır bir ipucu görüntüler. Bu açılır ipuçları ( araç ipucu.) Düzenleyeceğiz.
Bu makale dikkate alınacak:
- Standart açılır pencere ipuçlarını değiştirmek için eklenti nasıl kullanılır?
- QTIP ToolTips nasıl yapılandırılır
- Pop-up ucunda AJAX içeriğini nasıl gösterilir
Basit Özel Metin Pop-up İpuçları
Umarım bu niteliklerin başlık olarak açıklamanız gerekmez, ALT genellikle aşırı derecede gereklidir. Sonuçta, kullanıcıların çok sayıda bilgide daha iyi gezinmesine yardımcı olurlar ve ayrıca, arama motoru optimizasyonu için son derece faydalıdır. İstemlerdeki tek sorun - CSS stilleri kullanılarak değiştirilemezler. Bu sorunu çözmek için fırsatı kullanıyoruz.
1. Başlık özniteliği içeren temel HTML dosya çerçevesini oluşturun.
Linkler listesi:
- ana
- Şirket hakkında
- İletişim
- Portföy
2. Şimdi QTIP eklentisini depodan indirmek gerekir.
3. İndirilen dosyaları bağlayın:
// Standart Kütüphane jquery. // bu dosyada jquery scriptlerini reçete edeceğiz
4. Pop-up ipucunu scripts.js'e kaydolacak kadar çalışmak için:
$ (Belge) .Ready (işlev () ($ ("a"). Qtip ();));
Bu tasarım, başlık özelliğinde bulunan tüm referanslar için QTIP () yöntemi kullanılarak uygulanacağı anlamına gelir.
JQuery Qtip'i ayarlama.
1. Pop-up ipuçlarını özelleştirin farklı olabilir. Başlamak için, istemlerin görüntüleneceği pozisyonu değiştirin.
$ ("A"). QTIP ((pozisyon: (benim: "Alt merkez", // imlecin pozisyonu: "Top Center", // Pop-up İpuçları Konum: $ (Pencere) // İpucu olmaz kenarları yalamak ekranını)));
2. Konumu ayarladıktan sonra, istemin bir renk şeması yapabilirsiniz. Varsayılan olarak, jquery.qtip.min.css dosyası aşağıdaki renk stillerini içerir:
QTIP-Varsayılan (sarı varsayılan stil)
Qtip-bootstrap
Bu stillerden bazılarına, gölge ekleyebilirsiniz: Qtip-Shadow. Buna ek olarak, kimse kendi tarzlarını yaratmayı, genel olarak mükemmel bir şekilde birleştirilmesine engel olmaz, ancak standarttan daha fazla suistimalden daha fazla.
$ ("A"). Qtip ((pozisyon: (benim: "alt merkez", AT: "Top Merkez", Viewport: $ (Pencere)), Stil: (Sınıflar: "QTIP-Green Qtip-Shadow")) ;
Pop-up istemlerine sahip bir navigasyon menüsü oluşturma
1. Başlamak için, bir HTML çerçevesi oluşturun:
#Navigation (Arka Plan: RGB (132,136,206); / * Eski tarayıcılar * / arka plan: -Moz-linear gradyan (üst, RGBA (132,136,206,1) 0%, RGBA (72,79,181,1)% 50, RGBA (132,136,206) , 1)% 100); / * ff3.6 + * / arka plan: -Webkit-gradyan (doğrusal, sol üst, sol alt, renk durağı (% 0, rgba (132,136,206,1)), renk durdurma (50) %, RGBA (72,79,181,1)), renk durağı (% 100, RGBA (132,136,206,1))); / * krom, safari4 + * / arka plan: -Webkit-linear gradyan (üst, RGBA (132,136,206) , 1)% 0, RGBA (72,79,181,1)% 50, RGBA (132,136,206,1)% 100); / * Chrome10 +, Safari5.1 + * / arka plan: -O-linear gradyan (üst, RGBA (132,136,206, 1)% 0, RGBA (72,79,181,1)% 50, RGBA (132,136,206,1)% 100); / * Opera11.10 + * / arka plan: -MS-linear gradyan (üst, RGBA ( 132,136,206, 1)% 0, RGBA (72,79,181,1)% 50, RGBA (132,136,181,1)% 100); / * IE10 + * / Filtre: Progid: dximagetransform.microsoft.gradient (startcolorstr \u003d "# 8488ce" , Endcolorstr \u003d "# 8488ce", gradienttype \u003d 0); / * IE6-9 * / arka plan: lineer gradyan (üst, rgba (132,136,206,1) 0%, RGBA (72,79,181,1)% 50, RGBA ( 132,136,206,1) 100%); / * W3C * / LIST-stil türü: Yok; Marj: 100px 20px 20px 20px; Dolgu: 0; Taşma: Gizli; -Webkit-Sınır-yarıçapı: 5px; -Moz-Sınır-yarıçapı: 5px; Sınır-yarıçap: 5px; ) #Navigation li (marjı: 0; dolgu: 0; ekran: blok; şamandıra: sol; Sold-sağ: 1px katı # 4449A8;) #navigation a (renk: #fff; sınır sağ: 1px katı # 8488CE; ekran: blok; dolgu: 10px;) #navigation A: Hover (arka plan: # 859900; kenarlık-sağ renk: # A3BB00;)
Sonuç olarak, aşağıdaki resim elde edilmelidir:
3. Scripts.js dosyasında ekleyin:
$ ("# Navigasyon A"). QTIP ((konum: "(" Top Merkez ", AT:" Alt Merkez ", Viewport: $ (Pencere)), Göster: (Etkisi: İşlev (Ofset) ($ ) .Slidown (300);)), Gizle: (Etkisi: İşlev (Ofset) ($ (this) .Slit (100);)), Stil: (Sınıflar: "QTIP-Green Qtip-Shadow",)))) ;
Şimdi, fare imlecini navigasyon menüsünde vurduğunuzda, açılan ipucu görüntülenir (başlık özelliği).
Pop-up ucunda diğer içeriği görüntüleme
Standart etiketleri göstermenin yanı sıra, başka bir içerik, örneğin bir dosyadan, gizli bir kaptan veya veritabanından alınmış ve AJAX teknolojisini kullanarak sayfayı yeniden başlatmadan bir açılır ipucuda görüntülenebilir.
Bu bağlantı, Ajax'taki dosyadan içeriği alır.
HREF \u003d "ToolTip.txt" özniteliğinin değeri, köprünün her zamanki txt dosyasını ifade ettiği anlamına gelir.
$ (". Infobox"). Her (işlev () ($) .QTIP ((içerik: (metin: "Yükleniyor ...", // İçerik yüklenirken, bu kayıt AJAX görüntülenecektir: (URL: $ (BU) .ATTR ("href") // içerik alacağı yer), Başlık: (// ToolTip Metinde başlığa sahip bir alan ekleyin: $ (BU) .ATTR ("başlık"), düğme: true // İpuçlarını kapatmak için bir düğme ekler)), konum: (MY: "Top Merkezim", AT: "Alt Merkez", Etki: False, // Efekt Viewport'u Kaldırır: $ (Pencere)), Göster: (Olay: "Tıklayın ", // İpucu Ekranı Bağlantıya tıkladığınızda, 'Hover' ile değiştirilebilir, ardından SOLO'yu vurduğunuzda istemi belirir: True // ekranda yalnızca bir araç ipucu görüntülemenizi sağlar), Gizle:" unfocus ", // Thip Başka bir stil sayfasına tıkladığınızda tıklar: (Sınıflar:" Qtip-Green Qtip-Shadow ")));)). BID (" Tıklayın ", İşlev (E) (E.PreventDefault ())) ; // Bağlantıya tıkladığınızda, tarayıcı URL'yi indirmeyecek
Bu AJAX resepsiyonu yalnızca sunucu çalışırken çalışır. Böylece yerel bilgisayarda kazanması, örneğin,
Şimdiye kadar, artıların ve ek olarak'nın alüminyum bölümü radyatörlerinin ne olduğunu ve hangi radyatörlerin tüketicileri seçtiğini unutmadım.
(Bırakma: 409)
