jQuery manipulasi posisi (membuat animasi)
Di Posting Oleh : wandi
Kategori : Pelajaran Pemprograman web
Mau liat atau download source code aplikasi premium bisa disini.
Di Posting Oleh : wandi
Kategori : Pelajaran Pemprograman web
Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan mudah mudahan sehat , amin .
Oke kali ini kita akan bahas mengenai javascript . Kita sekarang akan membuat bagaimana cara memanipulasi posisi dengan menggunakan libary javascript yaitu jQuery . Gimana sih caranya ? jadi pada jQuery untuk memanipulasi posisi ada dua fungsi yaitu offset() dan juga position() .Oke yang pertama akan kita coba gunakan adalah yang fungsi offset() dulu saja .
Untuk menggunakan fungsi offset() ini , cara umum penulisannya adalah
offset(koordinat);
offset({top:value,left:value});
Jadi ada dua parameter yang pertama atasnya atau top dan yang kedua adalah pinggirannya atau left .Sekarang kawan kawan sudah tau dan mari kita lanjut ke contohnya .
<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
$("#div1").offset({top:300,left:300});
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">
Begitu kita mengklik pindah maka tag yang mempunyai id div1 akan berpindah ke top 300 dan left 300 . Oke sekarang kita akan coba menggunakan fungsi position() , fungsi ini akan menghasilkan objek yang mempunyai 2 properti yaitu top dan left .
<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
var ordinat=$("#div1").offset({top:300,left:300}).position();
alert(ordinat.top+" "+ordinat.left);
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">
sebelumnya ini masih contoh yang tadi cuma di tambah fungsi position(); dan saya kasih varible . Begitu kita klik pindah maka akan berpindah dan akan meng alert 300 300 . Gimana mudah bukan ? kita hanya perlu menggunakan fungsinya saja . Oke sekarang kita akan buat lagi dari awal , kita akan coba membuat begitu kita menekan panah kiri , kanan , atas , atau bawah di keyboard maka akan berpindah .Berarti kita akan menggunakan fungsi onkeydown atau onkeyup , buat yang belum tau baca dulu sini , sekarang kita gunakan fungsi onkeydown saja .
<style>
#div1{
width:100px;
height: 100px;
position:absolute;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
posisi=new Object();
var kiri=100;
var atas=0;
function x(){
posisi.left=kiri;
posisi.top=atas;
$("#div1").offset(posisi);
}
var tekan=document.onkeydown=function(p){
if(p.keyCode==39){
if(kiri>=1000){
kiri=1000;
}else{
kiri=kiri+30;}
x();
}
if(p.keyCode==37){
if(kiri<=0){
kiri=0;
}else{
kiri=kiri-30;}
x();
}
if(p.keyCode==40){
if(atas>=1000){
atas=1000;
}else{
atas=atas+30;}
x();
}
if(p.keyCode==38){
if(atas<=0){
atas=0;
}else{
atas=atas-30;}
x();
}
};
});
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7HpMY7LPF-cwtlFvFoaz8clPJ8AkRpklCUk7WlH67c47cphZ1QBFxoydUrowJ9nN7DkqJEIfcmhjNyUSyM0-QsZg8VUzJc8aWFfTOMYDQLNJm3HnRiF3kQ1EL2hE0LpyyQF-yLg6D4U/s1600/Goblin.png" id="div1"/>
Bro kalo yang 37,38,39,40 , apa ya ? itu namanya kode ascii lebih lengkapnya baca disini .
Scriptnya panjang tetapi sebenarnya itu sederhana jadi kawan kawan gak usah binggung , karena misal kalo kita menekan panah kiri di keyboard maka akan melakukan aritmatika kiri=kiri+30 dan jika kiri lebih besar atau sama dengan 1000 maka kiri tetap 1000 . kalo menekan panah atas di keyboard maka akan melakukan artimatika atas=atas-30 dan jika atas lebih kecil atau sama dengan 0 maka atas tetap 0 .
Oke itu dia belajar manipulasi posisi dengan menggunakan jQuery . Semoga menambah ilmu dan juga tentunya bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .
Pesan saya , teruslah lakukan experimen experimen , misal kalo saya kasih source code ini coba kalian buat versi kalian sendiri mungkin scriptnya lebih sederhana .
Oke kali ini kita akan bahas mengenai javascript . Kita sekarang akan membuat bagaimana cara memanipulasi posisi dengan menggunakan libary javascript yaitu jQuery . Gimana sih caranya ? jadi pada jQuery untuk memanipulasi posisi ada dua fungsi yaitu offset() dan juga position() .Oke yang pertama akan kita coba gunakan adalah yang fungsi offset() dulu saja .
Untuk menggunakan fungsi offset() ini , cara umum penulisannya adalah
offset(koordinat);
offset({top:value,left:value});
Jadi ada dua parameter yang pertama atasnya atau top dan yang kedua adalah pinggirannya atau left .Sekarang kawan kawan sudah tau dan mari kita lanjut ke contohnya .
<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
$("#div1").offset({top:300,left:300});
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">
Begitu kita mengklik pindah maka tag yang mempunyai id div1 akan berpindah ke top 300 dan left 300 . Oke sekarang kita akan coba menggunakan fungsi position() , fungsi ini akan menghasilkan objek yang mempunyai 2 properti yaitu top dan left .
<style>
#div1{
background-color: yellow;
width:100px;
height: 100px;
position:relative;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
$("#klik").click(function(){
var ordinat=$("#div1").offset({top:300,left:300}).position();
alert(ordinat.top+" "+ordinat.left);
});
});
</script>
<div id="div1">Test</div><input id="klik"value="pindah"type="button">
sebelumnya ini masih contoh yang tadi cuma di tambah fungsi position(); dan saya kasih varible . Begitu kita klik pindah maka akan berpindah dan akan meng alert 300 300 . Gimana mudah bukan ? kita hanya perlu menggunakan fungsinya saja . Oke sekarang kita akan buat lagi dari awal , kita akan coba membuat begitu kita menekan panah kiri , kanan , atas , atau bawah di keyboard maka akan berpindah .Berarti kita akan menggunakan fungsi onkeydown atau onkeyup , buat yang belum tau baca dulu sini , sekarang kita gunakan fungsi onkeydown saja .
<style>
#div1{
width:100px;
height: 100px;
position:absolute;
left:100;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script>
$(document).ready(function(){
posisi=new Object();
var kiri=100;
var atas=0;
function x(){
posisi.left=kiri;
posisi.top=atas;
$("#div1").offset(posisi);
}
var tekan=document.onkeydown=function(p){
if(p.keyCode==39){
if(kiri>=1000){
kiri=1000;
}else{
kiri=kiri+30;}
x();
}
if(p.keyCode==37){
if(kiri<=0){
kiri=0;
}else{
kiri=kiri-30;}
x();
}
if(p.keyCode==40){
if(atas>=1000){
atas=1000;
}else{
atas=atas+30;}
x();
}
if(p.keyCode==38){
if(atas<=0){
atas=0;
}else{
atas=atas-30;}
x();
}
};
});
</script>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc7HpMY7LPF-cwtlFvFoaz8clPJ8AkRpklCUk7WlH67c47cphZ1QBFxoydUrowJ9nN7DkqJEIfcmhjNyUSyM0-QsZg8VUzJc8aWFfTOMYDQLNJm3HnRiF3kQ1EL2hE0LpyyQF-yLg6D4U/s1600/Goblin.png" id="div1"/>
Bro kalo yang 37,38,39,40 , apa ya ? itu namanya kode ascii lebih lengkapnya baca disini .
Scriptnya panjang tetapi sebenarnya itu sederhana jadi kawan kawan gak usah binggung , karena misal kalo kita menekan panah kiri di keyboard maka akan melakukan aritmatika kiri=kiri+30 dan jika kiri lebih besar atau sama dengan 1000 maka kiri tetap 1000 . kalo menekan panah atas di keyboard maka akan melakukan artimatika atas=atas-30 dan jika atas lebih kecil atau sama dengan 0 maka atas tetap 0 .
Oke itu dia belajar manipulasi posisi dengan menggunakan jQuery . Semoga menambah ilmu dan juga tentunya bermanfaat . Terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .
Pesan saya , teruslah lakukan experimen experimen , misal kalo saya kasih source code ini coba kalian buat versi kalian sendiri mungkin scriptnya lebih sederhana .
Mau liat atau download source code aplikasi premium bisa disini.
0 Komentar