Bila anda ingin membuatnya, seperti berikut caranya :
1. Rancangan -> Tambah Gadget ->
Pilih HTML/JavaScript.
2. Masukkan ke dalam kontennya
kode yang tertera di bawah ini :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br /> <script type="text/javascript"><br /> $(document).ready(function() {<br /> $('.box_container').hover(function(){<br /> var distance = $(this).outerWidth();<br /> $(this).find('.box_image').animate({ left : distance },{queue:false,duration:200});<br /> }, function(){<br /> $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:200});<br /> });<br /> });<br /> </script><br /> <br /> <style><br /> .box_container{position:relative; width:270px; overflow:hidden; height:40px; background: blue; color:white;}<br /> .box_image { position:absolute; }<br /> .box_info { margin:10px; font-family: 'Georgia'; font-weight: bold;}<br /> </style><br /> <br /> <div class='box_container'><br /> <img class='box_image' src='URL Gambar di sini' style='width:270px'/><br /> <p>TEKS BELAKANG DI SINI</p><br /> </div>
KETERANGAN =
Ganti gambarnya dengan gambar miliki anda,
letakkan pada kode URL Gambar di sini
Sesuaikan ukuran width: & height: nya
dengan gambar anda tersebut.
Masukkan kalimat atau tulisan anda yang
akan menjadi latar belakangnya
pada kode TEKS BELAKANG DI SINI
Sesuaikan juga warna background dan warna
tulisannya pada kode background: & color:
Selamat mencoba, good luck!
Tinggalkan Pesan Anda Di Bawah
No Response to "Membuat Efek Pintu Geser Ke Kanan dengan JQuery"
Posting Komentar