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

X Ekseni girilen bir nesnenin ekranda kayması

<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

X Ekseni girilen bir nesnenin ekranda kayması

 

<!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>

 

Yorumunuzu Ekleyin
X Ekseni girilen bir nesnenin ekranda kayması Yorumları +1 Yorum
  • xxlarge
    1
    xxlarge
    insan bi demo koyar
    15 Aralık 2010 03:20:54, Çarşamba

Fonksiyonlar
Olaylar (Events)
Fare Uygulamaları
Pencere Uygulamaları
Sayfadaki Nesnelere Erişim
Filitre Uygulamaları
Resim Değiştirme Uygulamaları
Basit Sürükle Bırak Uygulaması
Sayaç(Counter) Uygulaması
Yükleniyor...