× İletişim Formu jQuery Zoom Arlina Design 8/03/2017 Etiketler : Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <link rel='stylesheet' href='http://www.jacklmoore.com/app.css'/> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;-webkit-font-smoothing:antialiased;margin:0 auto;text-align:center} .zoom{position:relativedisplay:inline-block;} .zoom:after{content:'';position:absolute;width:33px;display:block;height:33px;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooQ5HEmsZfSOD5XBCMXSHnnmOCpuQ_3J9RrdbUfs96NVnSat_QXpk3F5Zhtn71uVgcRoHnK-LUgUgMYUtNvgDUSM0UZQTicghyphenhyphenqOZyyrDrc7cheUgWr8H_KhaqG5iNDVOQL-4WUk-Fwg/s1600/icon.png)} .zoom img{display:block;object-fit:cover} .zoom img::-moz-selection{background:transparent} .zoom img::selection{background:transparent} #img1{margin-right:5px} #img2 img:hover{cursor:url(grab.cur),default} #img1 span,#img2 span{top:5px;position:absolute;right:30px;color:#444;} #img2 img:active{cursor:url(grabbed.cur),default} </style> </head> <body> <span class='zoom' id='img1'> <span>Hover</span> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJ4Km9kuMuejbxfH_sAG9iMmpBABMf3na46F2ZAEVHzRsAWwdCURWc7CF_xW86ezMPiQ3bwrBIwFQOW27PNS1bmiBKv9Yf2jQUPunbmOvq4xa0mjZuiRBrOoV9Gul65T3rQr5-Kqg0vY/s1600/ws.jpg' width='370' alt='Volkswagen Vosvos' height="213"/> </span><span class='zoom' id='img2'> <span>Grab</span> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A3B0hM_UtiNlPmN7InaomaU8orpi99evNm2GktNZ3D6N8nxnlzx-l7gRIHXX30CDZSJj14VMwxSmYY9kQUpwaCBNEU6CQD1fXMFl0aJTHRI7i5i3nfU194SpNEDJC2n_iPk69f4gGSg/s1600/gm.jpg' width='370' alt='VR Geliştirme' height="213"/> </span> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/zoom.js'></script> <script> if ($ && $.fn.zoom) {$('#img1').zoom();$('#img2').zoom({ on:'grab' });} </script> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "jQuery Zoom" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
jQuery Zoom Arlina Design 8/03/2017 Etiketler : Blogger jQuery Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <link rel='stylesheet' href='http://www.jacklmoore.com/app.css'/> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');body{font-family:'Fira Sans Condensed',sans-serif;-webkit-font-smoothing:antialiased;margin:0 auto;text-align:center} .zoom{position:relativedisplay:inline-block;} .zoom:after{content:'';position:absolute;width:33px;display:block;height:33px;top:0;right:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgooQ5HEmsZfSOD5XBCMXSHnnmOCpuQ_3J9RrdbUfs96NVnSat_QXpk3F5Zhtn71uVgcRoHnK-LUgUgMYUtNvgDUSM0UZQTicghyphenhyphenqOZyyrDrc7cheUgWr8H_KhaqG5iNDVOQL-4WUk-Fwg/s1600/icon.png)} .zoom img{display:block;object-fit:cover} .zoom img::-moz-selection{background:transparent} .zoom img::selection{background:transparent} #img1{margin-right:5px} #img2 img:hover{cursor:url(grab.cur),default} #img1 span,#img2 span{top:5px;position:absolute;right:30px;color:#444;} #img2 img:active{cursor:url(grabbed.cur),default} </style> </head> <body> <span class='zoom' id='img1'> <span>Hover</span> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJ4Km9kuMuejbxfH_sAG9iMmpBABMf3na46F2ZAEVHzRsAWwdCURWc7CF_xW86ezMPiQ3bwrBIwFQOW27PNS1bmiBKv9Yf2jQUPunbmOvq4xa0mjZuiRBrOoV9Gul65T3rQr5-Kqg0vY/s1600/ws.jpg' width='370' alt='Volkswagen Vosvos' height="213"/> </span><span class='zoom' id='img2'> <span>Grab</span> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3A3B0hM_UtiNlPmN7InaomaU8orpi99evNm2GktNZ3D6N8nxnlzx-l7gRIHXX30CDZSJj14VMwxSmYY9kQUpwaCBNEU6CQD1fXMFl0aJTHRI7i5i3nfU194SpNEDJC2n_iPk69f4gGSg/s1600/gm.jpg' width='370' alt='VR Geliştirme' height="213"/> </span> <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src='https://rawgit.com/jquerycods/jquery/master/zoom.js'></script> <script> if ($ && $.fn.zoom) {$('#img1').zoom();$('#img2').zoom({ on:'grab' });} </script> </body> </html>
Yorum Gönder