X Ekseni girilen bir nesnenin ekranda kayması
Bir textbox yardımı ile ekrandaki bir çiçeğin girilen koordinatlara göre hareketini sağlayan uygulama
Örnek 1
<html>
<head>
<script type="text/javascript">
<!--
function Mesaj(Girilen){
if(Girilen.value.length!=0){
NesneninSolu=document.getElementById('cicegim').style.left;
document.getElementById('cicegim').style.left=parseInt(NesneninSolu)+parseInt(Girilen.value)+"px";
window.status=document.getElementById('cicegim').style.left;
}
else document.getElementById('cicegim').style.display="none";
}
//-->
</script>
</head>
<body>
<form>
<img src="images.jpg" id="cicegim" width="116" height="109" style="position:absolute; z-index:10; left:50px; top:50px;" />
<input type="text" value="" onblur="Mesaj(this)" onclick="this.style.backgroundColor='#ffffff';" />
</form>
</body>
</html>
<head>
<script type="text/javascript">
<!--
function Mesaj(Girilen){
if(Girilen.value.length!=0){
NesneninSolu=document.getElementById('cicegim').style.left;
document.getElementById('cicegim').style.left=parseInt(NesneninSolu)+parseInt(Girilen.value)+"px";
window.status=document.getElementById('cicegim').style.left;
}
else document.getElementById('cicegim').style.display="none";
}
//-->
</script>
</head>
<body>
<form>
<img src="images.jpg" id="cicegim" width="116" height="109" style="position:absolute; z-index:10; left:50px; top:50px;" />
<input type="text" value="" onblur="Mesaj(this)" onclick="this.style.backgroundColor='#ffffff';" />
</form>
</body>
</html>
Örnek 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uygulama 1</title>
<script>
var solKonumu = 200
function xEkseni(gelenDeger) {
solKonumu += gelenDeger * 20
console.log(document.getElementById('ozi').style.left)
document.getElementById('ozi').style.left = solKonumu + "px"
}
function yEkseni(gelenDeger) {
solKonumu += gelenDeger * 20
console.log(document.getElementById('ozi').style.top)
document.getElementById('ozi').style.top = solKonumu + "px"
}
</script>
<style>
#ozi {
width: 150px;
height: 150px;
position: absolute;
left: 500px;
}
div {
width: 300px;
height: 300px;
}
button {
border: none;
cursor: pointer;
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<img src="polis.gif" id="ozi" alt="resim">
<div>
<button id="ustOk" onclick="yEkseni('-1')">↑</button>
<button id="solOk" onclick="xEkseni('-1')">←</button>
<button id="altOk" onclick="yEkseni('1')">↓</button>
<button id="sagOk" onclick="xEkseni('1')">→</button>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uygulama 1</title>
<script>
var solKonumu = 200
function xEkseni(gelenDeger) {
solKonumu += gelenDeger * 20
console.log(document.getElementById('ozi').style.left)
document.getElementById('ozi').style.left = solKonumu + "px"
}
function yEkseni(gelenDeger) {
solKonumu += gelenDeger * 20
console.log(document.getElementById('ozi').style.top)
document.getElementById('ozi').style.top = solKonumu + "px"
}
</script>
<style>
#ozi {
width: 150px;
height: 150px;
position: absolute;
left: 500px;
}
div {
width: 300px;
height: 300px;
}
button {
border: none;
cursor: pointer;
width: 100px;
height: 100px;
background-color: brown;
}
</style>
</head>
<body>
<img src="polis.gif" id="ozi" alt="resim">
<div>
<button id="ustOk" onclick="yEkseni('-1')">↑</button>
<button id="solOk" onclick="xEkseni('-1')">←</button>
<button id="altOk" onclick="yEkseni('1')">↓</button>
<button id="sagOk" onclick="xEkseni('1')">→</button>
</div>
</body>
</html>
Yorumunuzu Ekleyin