您的位置：首页 > Web前端 > JavaScript

js运动原理

2016-05-09 08:54 459 查看

#div1{

width: 200px;

height: 200px;

background: red;

position:absolute;

top: 50px;

left:0;

overflow: hidden;

}

img{

width: 200px;

height: 200px;

}

#div2{

width: 200px;

height: 30px;

position: absolute;

top: -30px;

left: 0;

background: blue;

}

</style>

</head>

<body>

<div id="div1">

<img src="20.jpg">

<div id="div2">

<p id="p1">jdlfalfjljflorueoreorllj</p>

</div>

</div>

<script type="text/javascript">

var oDiv=document.getElementById("div1");

var p1Timer=null;

oDiv.onmouseover=function(){

var oDiv2=document.getElementById("div2");

//oP.style.top="0px";

clearInterval(p1Timer);

p1Timer=setInterval(function(){

if(oDiv2.offsetTop>30){

clearInterval(p1Timer);

}

else{

oDiv2.style.top=oDiv2.offsetTop+5+"px";

}

},30);

}

oDiv.onmouseout=function(){

//oP.style.top="-40px";

clearInterval(p1Timer);

p1Timer=setInterval(function(){

var oDiv2=document.getElementById("div2");

if(oDiv2.offsetTop<-40){

clearInterval(p1Timer);//清理

}

else{

oDiv2.style.top=oDiv2.offsetTop-5+"px";//做运动

}

},30);

}

/* var oDiv1Timerid=null;

var oBt=document.getElementById("bt1");

oBt.onclick= function () {

var oDiv=document.getElementById("div1");

//1. 启动定时器之前，需要清理之前的定时器。

clearInterval(oDiv1Timerid);

//启动定时器，并记录返回值（定时器的标识）

oDiv1Timerid=setInterval(function(){

//做运动的部分和清理定时器的部分，放在 if else 里面

if(oDiv.offsetLeft>600){

//清理定时器的条件。要注意边界判断！

clearInterval(oDiv1Timerid);

}

else{

oDiv.style.left=oDiv.offsetLeft+9+"px";

}

/!* if(oDiv.offsetLeft>300-9)

{//最后一步的时候，直接到目标值

oDiv.style.left="300px";

}

else{

oDiv.style.left=oDiv.offsetLeft+9+"px";

}*!/

},30);

}

var oBt2=document.getElementById("bt2");

oBt2.onclick= function () {

var oDiv=document.getElementById("div1");

clearInterval(oDiv1Timerid);

oDiv1Timerid=setInterval(function(){

if(oDiv.offsetLeft<0){

clearInterval(oDiv1Timerid);

}

else{

oDiv.style.left=oDiv.offsetLeft-9+"px";

}

/!* if(oDiv.offsetLeft>300-9)

{//最后一步的时候，直接到目标值

oDiv.style.left="300px";

}

else{

oDiv.style.left=oDiv.offsetLeft+9+"px";

}*!/

},30);

}*/

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航