js基础-当鼠标移入时通过改变子类的left来实现子类的内容

来源：互联网发布：通达信引用周线数据编辑：程序博客网时间：2024/05/16 09:38

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
#box{

height: 100px;
width: 100px;
background: pink;

//position: fixed;当父亲用固定定位时，z-index不起作用；

position:ralative;//使用相对定位时top的值要大于等于自身的高度onmouseenter，onmouseleave才起作用；

top: 100px;
left: 0;
}
#box p{

height: 100px;
width: 100px;
background: red;
position: absolute;
left: 0px;

top: 0px;

z-index: -100;//当父亲用固定定位时，z-index不起作用

}
</style>
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById('box');
var oP=document.getElementsByTagName('p')[0];
var timer=null;//定义一个定时器，初始值为空；
function move(obj,target){//先定义一个可以改变left值的函数；
clearInterval(timer);//清除定时器；
timer=setInterval(function(){
var speed=(target-obj.offsetLeft)/10;//得到的值越来越小，最后为0，不再移动；
speed=speed>0?Math.ceil(speed):Math.floor(speed);//对speed取整；
obj.style.left=obj.offsetLeft+speed+'px';
},30);//每隔30毫秒改变一次left的值；
}
oBox.onmouseenter=function(){//鼠标移入时调用函数；
move(oP,100);
this.onmouseleave=function(){//移出时调用函数；
move(oP,0);
}
}

}
</script>
</head>
<body>
<div id="box">
<p>1</p>
</div>
</body>
</html>

阅读全文

0 0