var num=1;
function fun(){
if (num==1){
fun2();
num=2;
}
else if(num==2){
fun3();
num=3;
}
else if(num==3){
fun4();
num=4;
}
else if(num==4){
fun1();
num=1;
}
}
function fun1(){
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.right=88+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function fun2()
{
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
document.getElementById('d1').style.top=0+"%";
document.getElementById('d1').style.bottom=76+"%";
}
function fun3()
{
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=88+"%";
document.getElementById('d1').style.right=0+"%";
}
function fun4()
{
document.getElementById('d1').style.bottom=0+"%";
document.getElementById('d1').style.left=0+"%";
document.getElementById('d1').style.top=76+"%";
document.getElementById('d1').style.right=88+"%";
}
#d1
{
width: 160px;
height:160px;
background-color: #66ffff;
border: 2px solid #59d9d9;
border-radius:10px 10px 10px 10px ;
box-shadow: 2px 2px 10px #cccccc;
position: absolute;
top: 0%;
left: 0%;
right:86%;
bottom:86%;
}
#input{
margin-top:45px;
margin-left: 30px;
width: 101px;
height: 68px;
background-image: url("button.png");
background-color: #66ffff;
color: #ffffff;
font-weight: 700;
border: 0px;
}