Resim Hareketlendirme
<html>
<head>
<title>java</title>
</head>
<body onkeypress="HareketEt(this,-1)">
<script type="text/javascript">
<
function HareketEt(Resim, Gidis){
for(i=0; i<10; i++){
ResminYeri=parseInt(Resim.style.left);
if(!ResminYeri) ResminYeri=0;
Resim.style.left = ResminYeri + i*Gidis + "px";
}
}
//>
</script>
<img src="resimler/3.gif" width="10%" height="10%" style="position:absolute;" onmouseover="HareketEt(this,1)" />
</body>
</html>
<head>
<title>java</title>
</head>
<body onkeypress="HareketEt(this,-1)">
<script type="text/javascript">
<
function HareketEt(Resim, Gidis){
for(i=0; i<10; i++){
ResminYeri=parseInt(Resim.style.left);
if(!ResminYeri) ResminYeri=0;
Resim.style.left = ResminYeri + i*Gidis + "px";
}
}
//>
</script>
<img src="resimler/3.gif" width="10%" height="10%" style="position:absolute;" onmouseover="HareketEt(this,1)" />
</body>
</html>
Örnek 2
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2012/11/28/10/16/stars-67616_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#UGemi {
position: absolute;
}
</style>
<script>
var Adim = 10;
var y=0, x =0;
function TusaBasildi(event) {
BasilanTusNo = event.keyCode;
//alert(BasilanTusNo); //basılan tusun nosu
switch(BasilanTusNo) {
case 38 : y-=Adim; break; //yukarı tus
case 40 : y+=Adim; break; //asagi tus
case 37 : x-=Adim; break; //sol tus
case 39 : x+=Adim; break; //sag tus
}
//console.log(x);
document.getElementById('UGemi').style.top = y + 'px';
document.getElementById('UGemi').style.left = x + 'px';
}
</script>
</head>
<body onkeydown="TusaBasildi(event)">
<img src="resimler/rocket.gif" id="UGemi" />
</body>
</html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2012/11/28/10/16/stars-67616_960_720.jpg');
background-size: cover;
background-repeat: no-repeat;
}
#UGemi {
position: absolute;
}
</style>
<script>
var Adim = 10;
var y=0, x =0;
function TusaBasildi(event) {
BasilanTusNo = event.keyCode;
//alert(BasilanTusNo); //basılan tusun nosu
switch(BasilanTusNo) {
case 38 : y-=Adim; break; //yukarı tus
case 40 : y+=Adim; break; //asagi tus
case 37 : x-=Adim; break; //sol tus
case 39 : x+=Adim; break; //sag tus
}
//console.log(x);
document.getElementById('UGemi').style.top = y + 'px';
document.getElementById('UGemi').style.left = x + 'px';
}
</script>
</head>
<body onkeydown="TusaBasildi(event)">
<img src="resimler/rocket.gif" id="UGemi" />
</body>
</html>
Örnek
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 750px;
}
#araba{
background-image: url('https://fakeimg.pl/100x100/?text=araba');
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="araba"></div>
</body>
<script>
var ust = 50;
var left = 50;
window.addEventListener('keydown',function(e){
var tus = e.keyCode;
console.log(tus);
switch (tus){
case 37:
left-=10;
// alert(left);
break;
case 38:
ust-=10;
// alert(ust);
break;
case 39:
left+=10;
// alert(left);
break;
case 40:
ust+=10;
// alert(ust);
break;
default:
break;
}
document.getElementById('araba').style.top = ust+'px';
document.getElementById('araba').style.left = left+'px';
})
</script>
</html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
body,html{
height: 750px;
}
#araba{
background-image: url('https://fakeimg.pl/100x100/?text=araba');
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="araba"></div>
</body>
<script>
var ust = 50;
var left = 50;
window.addEventListener('keydown',function(e){
var tus = e.keyCode;
console.log(tus);
switch (tus){
case 37:
left-=10;
// alert(left);
break;
case 38:
ust-=10;
// alert(ust);
break;
case 39:
left+=10;
// alert(left);
break;
case 40:
ust+=10;
// alert(ust);
break;
default:
break;
}
document.getElementById('araba').style.top = ust+'px';
document.getElementById('araba').style.left = left+'px';
})
</script>
</html>
Yorumunuzu Ekleyin
