JS实现鼠标滑入出现弹窗功能
案例:分享到菜单功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 100px;height: 200px;background-color: gray;position: absolute;left: -100px;top: 200px;border: 1px solid black;}
#div1 span{width: 20px;height: 60px;background-color: orange;position: absolute;left: 100px;top: 70px;border: 1px solid black;line-height: 20px;}
</style>
<script>
/*
鼠标移入
-100 => 0
鼠标移出
0 =>-100
*/
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
StartMove(0);
}
oDiv.onmouseout = function(){
StartMove(-100);
}
}
var timer = null;
function StartMove(iTarget){
var oDiv = document.getElementById("div1");
var speed = 50;
if(oDiv.offsetLeft > iTarget){
speed = -Math.abs(speed);
}else{
speed = Math.abs(speed);
}
clearInterval(timer);
timer = setInterval(function(){
if(oDiv.offsetLeft == iTarget){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft + speed + 'px';
}
},30);
}
</script>
</head>
<body>
<di id = 'div1'>
<span>分享到</span>
</di>
</body>
</html>
效果:
相关回顾:JS实现物体运动