23 Temmuz 2014, ÇARŞAMBA

Çift Görüntü Ortaya Denetim Öğretici Javascript Css Html

Mmm geçmiş Ben nasıl bilseydi howdy doody herkes dün birisi bana sordu İki farklı görüntü sahneler uzayda ortaya Kullanıcının fare konumuna göre ben gibi böyle bir denetim mühendisliği hiç Ondan önce iyi bir hızlı meydan bana neden bahsettiğimi sana göstereyim ama ben zevk Eğer bu video oluşturmak için öğrenme olacak gerçeğini bitirmek için Bir kullanıcı sayfaya gelir ve her yerde onların fare koyar ne olur ise Görüntülerin bu tür herhangi onlara kontrolünü sağlar İki resim arasındaki ayıran çizgi Eğer daha önce olsaydı çifti bu var görüntülerin serin olacağını ve fotoğrafları sonra Ben bir korsan d

önüştü önce beni böyle olduğunu ve ben bir korsan dönüştü sonra bu beni ve bu sadece negatif olduğu Bu yüzden normal durumda bir okul otobüsü olduğunu ve bu ben bunun için oluşturulmuş bir negatiftir ve kullanıcı denetimi

nde bu benim sayfaya gelebilir Bu arada, bu tür çıplak kemikleri bir html5 web belgesine sahip olan tamam yapacağız başlamak ediyoruz Eğer istersen bunun adı ve sonra sadece yapabilir emin bazı görüntül

“Ders Kodu: http://www.developphp.com/video/JavaScript/Dual-Image-Reveal-Control-Tutorial Bir çift görüntü çok ince JavaScript ve CSS klip özelliğini kullanarak ko...”
Adam Khoury

erin var hazır yapacağım ilk şey html dışında yapıdır Biz ilk birkaç satır emin olun inmek yerine vermek koymak edeceksin biz bu anlaşma yakın Şimdi biz görüntü etiketi olacak koymak olduğunu yaptım teşvik kaynağını verecek ilk görüntüyü istediğiniz geçmişe eşit nitelikleri ve mayın uygun bir Hollandalı bir pic adlı bison Bunu almak ve sadece bir kopya yapacağız ve aynı çiftinin parçası olan ikinci resim koymak Şimdi biz edeceksin bu ikinci olanlar sınıfı biz b

Çift Görüntü Ortaya Denetim Öğretici Javascript Css Html Resim 1 Çift Görüntü Ortaya Denetim Öğretici Javascript Css Html Resim 2 Çift Görüntü Ortaya Denetim Öğretici Javascript Css Html Resim 3 Çift Görüntü Ortaya Denetim Öğretici Javascript Css Html Resim 4

u şekilde vermek Şarkı klasik yani CSS ile etkilenen Görüntü Şimdi bu da bir sınıf bu verecekler mi üzere Ben açığa vuracağız yüzden bunu ana konteyner küçük bir gerçeği ortaya çıkarmak ve o zaman sadece tokat iki resim bir kez ben yaptım görüntüleri ile çift Onlara sınıfları ve kimlikleri veriyoruz neden oldukça basit nedeni Eğer bu almak ve senin kadar sayfada birçok kez bu koymak olabilir böylece istemek Biz konum çok son şeyin içinde ve nihayet HTML farklı görüntülerle ihtiyacımız olacak o doğru hem de üst bırakır mı olduğ

unu görüntü ama biz şeffaf öylesine yapmak edeceksin senin Şimdi üç unsuru vardır kabı ortaya ve her bir eleman ilk üst üste yığınlar CSS biz yapacağız çünkü hepsini mutlak pozisyon yapmak Bu olacak bir pozisyon ve kesinlikle hepsi yığını için gidiyoruz Neely tamam birbirinin üstüne doğru şimdi onlar olmayacak bakarsanız birbirinin üstüne de istiflenerek Biz CSS uyguladığınızda ancak bu Seni o bir sınıf verdin şimdi olacak aktivatör eşit bu hizmet için gidiyor yaptım çünkü aktivatörü olarak gerçekten her şeyi kontrol neler olacak ve yaptığımız fare üzerindeki vererek olay taşımak ve biz eşit olun javascript fonksiyonu herkes fare hareket her zaman bir yangın ve adlandırılmış olacak işlevler biz de olayı aktarmak istiyorum ortaya koyuyor işlevine bu şekilde bir argüman olarak olay geçmiş görmek bir argüman olarak Bu fonksiyon çalışır Eğer herhangi bir miktar için dinamik kullanabilirsiniz Bunu koymak demek bir sayfada var öğeleri ortaya sayfadaki on kat sınıf kabı ortaya On farklı çiftleri görüntüleri bu var Ben işlevi hepsi için dinamik çalışmaya gidiyor ortaya Biz olayı geçti neden ve biz hedef olabilir yolu Gerçek diğer konteyner ortaya üzerinde bir fare gibi kullanıcı ve HTML için olduğunu Ben aslında şu anda izin hakkı bir yenisini eklemekten olacağım Bana sadece kopyalamak olduğunu yakala izin ve bunu daha koymak ne kadar kolay olduğunu göstereceğim sayfa Bir görüntü kaynağına değiştirebilirsiniz: 23 ve ve thats değiştirmek zorunda tüm KML tüm İçine olacak görünür gitmek değilim yapılır benim Baş elemanı ve stil öğesi içinde Gidip biraz CSS uygulamak Burada tüm bu unsurları etkileyecek gidiyor tamam ve tüm anlatacağım şu an o kadar İlk biz sınıf elemanları ortaya hedefliyorsanız net, bu kapların yaptım olduğunu Şimdi ben sadece benim görüntüleri olduğunu onlara büyüklüğünde yapılan Tüm görüntüleri 280 ve bu numaralar ile oynayabilirsiniz Eğer olmalarını gerekiyor ve ben sadece siyah bir kap verdi ne olmak border: solid ve ben o sayfadaki yığılmış olabilir bu şekilde terk yüzdürülür Yatay dalgalanmaları: Sadece izin bıraktı bir görüntü gibi bir satır içi eleman gibi davranır mı onlar değil böyle davranmaya ve daha sonra olur ben onlara bir marjı ve 24 piksel verdi birbirleri ile üst üste kalabalık ve bu kural görüntüleri hedefleyen içindir içindeki yukarıda ortaya herhangi bir görüntü Kap yüzden buraya biz açığa konteyner var bakın ve biz bu kural böylece içindeki iki görüntü var Bu mutlak değer uygulanır Onları yığını kılan tüm görüntüleri olduğunu Daha sonra aperatifler kural sadece olacak hedef olacak sınıf anahtarları görüntü sınıflar görüntü var burada bu elemanlar Şimdi biz klibi özelliği uyguluyorsanız olan kişilere yapıyor klip özelliğinde CSS size klibi sağlar apportion dışarı seni elemanı hedefleme edeceğiz bu yüzden görüntüde hedeflediğiniz ve iş bu dikdörtgenin onu kırpma ve ben aslında söylüyor Sizin için burada biraz yorumunu koyacağım Sağ üst alt yüzden benim üst olabilir sol değer sıfır piksel vardı sonra benim lil sağ klibi Ben ne yapar olduğunu 240 piksel vardı sağ merkezinde aşağı tüm yol başlatmak istiyorsanız işe başlamak sol Bütün ilk görüntü göstermek için sadece 0 bu koymak ama 140 onlar merkezini aşağı bölünmüş konum bu şekilde koydu ve sonra alt değeri sadece yüksekliği görüntüleri koymak ve ardından sol değeri biz de sıfırları koymak ve son olarak aktivatör özelliklere sahipti bu nedenle bu burada yaptığımız bu uygulanır bir özellikleri olduğunu Biz aktivatör için kullanarak bu biz vergilendirilir oluyor mutlak böylece konumlarını vermek Sağ iki resim de üstünde biz bunun içinden doğru görebiliyorum böylece o kolay rolünü geçmek yapmak Ben onun arka plan siyah yapılmış ama bir arka plan rengi olması gerekmez onların Ben sadece deney ise yerinde aynı genişlikte vermek ve bu koymak yükseklik Bizim görüntü olarak ve sonra imleç yapmak E boyutlandırmak ve bu sana biraz çift oku verir elemanın üzerinde kullanıcının moskova en göreceksiniz zaman tackles sağ ve sol Biraz çift ok onları sağ ve sol şeyleri taşıyabilirsiniz bilmesini sağlar tamam bu yüzden Firefox'ta şimdi bu bak Biz başlangıç ​​noktası olduğunu görüyoruz neyse Internet Explorer Chrome ancak etki için hiçbir denetim henüz yok Biz bunu kontrol etmek yerinde hiçbir javascript var çünkü henüz kontrol edemiyorum ve temelde ne yapmak istediğinizi bu klip değeri taşımak olduğunu Bu, bu doğru klip değer bunu değiştireceğiz javascript bir değer olduğunu Bizim gençlik göre kullanıcının mouse yüzden script elemanına aşağı gidelim nerede uygulama için bir yerde bizim JavaScript koymak ve onlar bir sahip r aktivatör verir nasıl mousemove olay ve ortaya fonksiyon yangınları üzerine bu yüzden bizim JavaScript ortaya koyuyor işlevi olması ve burada işlev ortaya ve ben yapıyorum ilk şey bir argüman olarak olay bu şekilde karıştırıyordu i kin çalıştırmak için işlevini çağırıyor elemanı hedef daha dinamik bu şekilde biz onları çok çok olabilir ancak sayfada gerçekten soğuk bir sürü olması gerekmez bu yüzden yaptığımız ilk şey aslında sadece bir satır var güçler bu her şey bana ilk çalışma size göstermek ve daha sonra anlatacağım Online bu yüzden resimlerin herhangi üzerinde benim fare koymak biz istedik kontrol olsun Gördüğünüz ve bu görüntülerin sayfasında nerede önemli değil Eğer yol, bu tür olay ile çalışırken tamam yüzden geçmesi nerede fonksiyonu sayesinde argüman olarak olay Eğer fonksiyon çalıştırmak yapıyor elemanı hedefleyebilir bu nedenle bu kullanıcıların Moskova'nın zamandır Biz dinamik görüntüleri alabilirsiniz bu aktivatör kardeş buraya şimdi biz başka bir devreye girmiş yaptım ve bu da bizim scriptler ve içgörü vermek edildi onun kardeşleri bu yüzden yapmamız gereken kim olduğunu önceki hedef kardeş elemanları böylece ben Target de olay kullanılmış yaptım hangi çalıştırmak işlevini çağırarak gerçek elemana erişim sağlar hangisi Bu gün burada ve önceki eleman kardeş yani ne olur demek Hedef Önceki eğer senin olacak hedef anlamına gelen bu element için kardeş elemanı Bu unsur, böylece tüm sizinle burada ne Şu anda mavi vurgulanan bu kod senin bu görüntüyü hedefliyor Hedef bu kadar olay için resmin bir sınıfı vardır önceki eleman kardeş Recchi dinamik Bu eleman hedef ya bu eleman dinamik bağlı olarak hangi görüntüleri kullanıcının anda kontrol sözü bu yüzden Hedef az olay önceki unsurlar kardeş söyledim o zaman biz sadece görüntüleri kendi tarzını etkileyecek stil özelliği yukarı klip ve biz sadece yeni bir dikdörtgen eşit olun biz statik olduğunu burada dikdörtgen tıklayın yapıyoruz nasıl Bu kırpma dinamik bir dikdörtgen sağ dolayı Doğru değeri yaptım bu doğru değeri yapmak olduğunu görünmesi Dinamik yani pikseller her zaman dinamik bir numara olacak Fare en ve yol yapmak yere göre aldım Fare pozisyon olay nokta müşteri diyordu Sayfa fare en üstünde nerede söyler X ve sonra biz olay nokta hedef nokta çıkarma bu yüzden her yerde sol ofset elementler Eğer onun sol ofset bu sayıyı çıkarma sayfada vardır Sadece Kullanıcıların fare sayfasında sayede o çıkarma ve bu size ihtiyacınız olan yeni kırpmayı verir o sadece basit CSS kırpma ama biz dinamik yapıyoruz Kullanıcıların fareler yere göre ve bu tüm temel zirve var Bunu görmek için bir kez daha kontrol Kırpma bölge benim fare giymek göre değişiyor resmin üzerine gidiyor böylece CSS klip dikdörtgen değişiyor ki şimdi ben biraz senin için kullanışlı olabilecek bazı ipuçları iletmekten istiyorum gitmeden önce Çocuklar Şimdi CSS sadece karşılık numaraları ayarlamak senin tercihli Görüntü boyutu: Eğer işlevselliği bulmak eğer şimdi Şimdi tablet dokunmatik ekran var bizim telefonlar ya da bir şey üzerinde çalışıyor Çalışmak etkinleştirmek için dokunmatik olayları uygulayabilirsiniz Bu tür olaylar javascript kullanarak yerine konabilir çok kolay siz de her istediğiniz typeof dokunmatik olay eklemek olduğunu kontrol çift ​​görüntü işlevselliğini ortaya ve o işe yapacak Dokunmatik ekranın hemen hemen her türüne video zevk eğer o sadece seyretti 2010 yılında ayarlamak abone butonuna tıklayın O normal bir şey bu yeni şeyler kullanabilirsiniz birkaç barış şefi Julian için sağ tuşa var liste Bulunan alanda bu bulmada yardımcı olmak için izlediğiniz için teşekkürler Bir dahaki sefere, eğer.

Açıklama

Ders Kodu: http://www.developphp.com/video/JavaScript/Dual-Image-Reveal-Control-Tutorial Bir çift görüntü çok ince JavaScript ve CSS klip özelliğini kullanarak kontrol arayüzü ortaya oluşturmak öğrenin. Hiçbir çerçeveler Gerekli :)

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

Adam Khoury

Adam Khoury

Profesyonel bir online bedava gibi kod ve tasarım öğrenin. JavaScript, PHP, SQL, HTML, CSS, ActionScript ve daha fazlası gibi usta geliştirme teknolojileri. Tüm videoları http://www.developphp.com daha iyi organize olan

YORUMLAR



9.8/10

  • 151
    Olumlu
  • 2
    Olumsuz
  • 32
    Yorum
  • 8928
    Gösterim

SPONSOR VİDEO

Rastgele Yazarlar

  • backyardjay

    backyardjay

    8 ŞUBAT 2009
  • TheDroidDemos

    TheDroidDemo

    15 ŞUBAT 2011
  • tychoadragmire

    tychoadragmi

    20 Mart 2006

ANKET



Bu sayfa işinize yaradı mı?