运动html网页,js运动基础.html

#div1

{

display: flex;

flex-direction: row;

}

#div2

{

background-color: bisque;

border:1px soild red;

width: 200px;

height: 200px;

position: fixed;

left:-200px;

opacity: 0.3;

}

#btn

{

position: relative;

top:240px;

height: 30px;

}

window.οnlοad=function()

{

var btn=document.getElementById('btn');

btn.οnmοuseοver=function()

{

startmove(200,10);

}

btn.οnmοuseοut=function()

{

startmove(-200,-10);

}

var timer=NULL;

function startmove(tag,speed)

{

var div=document.getElementById('div2');

clearInterval(timer);

timer=setInterval(move,30);

function move()

{

if(div.offsetLeft==tag)

{

clearInterval(timer);

}

else

{

div.style.left=div.offsetLeft+speed+'px';

}

}

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史