Membaca bersama Anda akan belajar:
Apa posisi absolut dan relatif yang dapat dilakukan
Bagaimana beberapa fungsi JavaScript dapat dipanggil secara otomatis di buka halaman
Bagaimana JavaScript dapat digunakan untuk memanipulasi "gaya" sifat-sifat unsur
Bagaimana JavaScript dapat digunakan untuk mengubah sifat ini
Oke, sekarang mari kita mulai!
TEORI
Kita akan memiliki unsur-unsur berikut di halaman:
Sebuah wadah (div)
sebuah gambar
kontrol Link
kontainer
Wadah akan ditata untuk memiliki ukuran 500px 300px oleh. Ini akan memiliki position: relative yang membuat apa pun di dalam untuk diposisikan sehubungan dengan wadah ini. Ini dilakukan untuk melakukan langkah citra independen dari penempatan wadah. Kami juga akan membuat meluap dari wadah untuk menjadi "tersembunyi".
gambar
Gambar akan diberikan position: absolute yang berarti dapat diposisikan dengan absolut (kiri (x), atas (y)) nilai-nilai. Gambar Biasanya (seperti unsur-unsur lain) diposisikan, selaras, dibungkus sesuai dengan unsur-unsur lainnya. Posisi mutlak Namun, memberi kita kekuatan untuk menempatkan gambar (atau elemen lain) secara bebas.
kontrol Links
Kontrol Link akan digunakan untuk menjalankan fungsi-fungsi untuk memindahkan gambar dalam arah masing-masing.
Lain-lain.
Fungsi yang disebut dengan link Kontrol akan memanipulasi posisi gambar menggunakan salah document.getElementById () function.
Fungsi ini digunakan untuk referensi elemen dalam dokumen unik dengan menggunakan ID mereka (yang seharusnya unik untuk setiap elemen). Sifat gaya elemen yang direferensikan sebagai:
document.getElementById(<ID>).style.<STYLE-NAME>Kami akan menggunakan aktivitas onload dari elemen body untuk memohon Init () fungsi awalnya pada buka halaman.
<body onload="javascript:Init()">CARA KERJA
Saat kemudian halaman, fungsi Init () semakin disebut yang menetapkan posisi awal gambar.
Ketika link diklik kontrol, masing-masing koordinat (x atau y) dimodifikasi dan nilai baru diatur dalam baris berikut:
document.getElementById('img1').style.left = x + 'px';
document.getElementById('img1').style.top = y + 'px';
kode :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript: Moving an Image</title>
<script type="application/ecmascript">
// --CHANGE THESE IF REQUIRED--
// Initial x-position of image
var x = 200;
// Initial y-position of image
var y =100;
// Pixels to move in each step
var inc = 10;
function Init()
{
document.getElementById('img1').style.left = x + 'px';
document.getElementById('img1').style.top = y + 'px';
}
function moveRight()
{
x += inc;
document.getElementById('img1').style.left = x + 'px';
}
function moveLeft()
{
x -= inc;
document.getElementById('img1').style.left = x + 'px';
}
function moveUp()
{
y -= inc;
document.getElementById('img1').style.top = y + 'px';
}
function moveDown()
{
y += inc;
document.getElementById('img1').style.top = y + 'px';
}
</script>
<style>
#box
{
width: 500px;
height: 300px;
position: relative;
margin: 20px auto 0px auto;
border: 5px outset #000;
overflow: hidden;
}
.image
{
position: absolute;
z-index: 100;
}
</style>
</head>
<body onload="javascript:Init()">
<div id="box"><img class="image" id="img1" src="ball.png"/></div>
<a href="javascript:moveLeft()">Left</a>
<a href="javascript:moveUp()">Up</a>
<a href="javascript:moveDown()">Down</a>
<a href="javascript:moveRight()">Right</a>
</body>
</html>CATATAN: Sebuah gambar dengan nama "ball.png" harus ada di direktori yang sama dengan file ini untuk kode di atas untuk bekerja "apa adanya".
0 comments:
Post a Comment