- Katılım
- 9 Ara 2020
- Konular
- 71
- Mesajlar
- 255
- Çözümler
- 1
- Tepki puanı
- 218
- Puanları
- 2,110
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Deneme</title>
<style>
#div1{
height: 50px;
width: 50px;
float: left;
top: 10px;
position: absolute;
background: red;
}
#div2{
height: 50px;
width: 50px;
float: left;
top: 10px;
left: 451px;
position: absolute;
background: green;
}
</style>
<script type="text/javascript">
var x1=0,x2=452,zaman1,zaman2
zaman1=window.setInterval("ileri1()",10);
function ileri1(){
document.querySelector("#div1").style.left=x1;
if(x1==402){
dur1()
};
x1++;
}
function dur1(){
clearInterval(zaman1);
zaman2=window.setInterval("ileri2()",10);
}
function ileri2(){
document.querySelector("#div2").style.left=x2;
if(x2==804){
dur2()
};
x2++;
}
function dur2(){
clearInterval(zaman2)
gzaman2=window.setInterval("geri2()",10);
}
function geri2(){
document.querySelector("#div2").style.left=x2;
if(x2==452){
gdur2()
};
x2--;
}
function gdur2(){
clearInterval(gzaman2)
gzaman1=window.setInterval("geri1()",10);
}
function geri1(){
document.querySelector("#div1").style.left=x1;
if(x1==0){
gdur1()
};
x1--;
}
function gdur1(){
clearInterval(gzaman1)
zaman1=window.setInterval("ileri1()",10);
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
