jQuery manipulasi posisi (membuat animasi) - Hallo sahabat Berita Teknologi Paling Update, Pada Artikel yang anda baca kali ini dengan judul jQuery manipulasi posisi (membuat animasi), kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Pelajaran, Artikel Pemprograman web, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : jQuery manipulasi posisi (membuat animasi)
link : jQuery manipulasi posisi (membuat animasi)

jQuery manipulasi posisi (membuat animasi)

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 gimana 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/AVvXsEildYMOK_OAUIZDs6jAik6nOEeJb5j0oPv06fX2mD6mGAT9BR6pIsokv-9zFW1OcSfF1ICRXYF41h1JwIKOT1-vYFvPk0A7ateMkvjtruF1RN7jITy4nTHU8XBo1Knv8Y5o2C4eCaxMHXA/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 .

Demikianlah Artikel jQuery manipulasi posisi (membuat animasi)

Sekianlah artikel Dari

www.lulussmk.com

jQuery manipulasi posisi (membuat animasi) kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel jQuery manipulasi posisi (membuat animasi) dengan alamat link https://pakarteknologiandroid.blogspot.com/2020/07/jquery-manipulasi-posisi-membuat-animasi.html