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

最新推荐文章于 2023-12-21 00:25:08 发布

原创最新推荐文章于 2023-12-21 00:25:08 发布 · 482 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #鼠标

前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客探讨了如何使用JavaScript在鼠标移入事件中改变子元素的left属性，以实现动态效果。同时提到了在不同定位方式下，如fixed和relative，以及z-index属性的影响和限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>