鼠标放到DIV1上，DIV2匀速向上移动100px；鼠标移开，DIV2匀速回到之前状态。DIV我只能用class，谢谢 5
.这是CSS.box1{width:200px;height:200px;border:1pxsolid#000000;margin:5px;overflow:hidde...
.这是CSS
.box1{
width:200px;
height:200px;
border:1px solid #000000;
margin:5px;
overflow:hidden;
position:relative;}
.box2{
width:200px;
height:150px;
background:#3A00FF;
position:absolute;
top:150px;}
这是DIV布局
<div class="box1">
<div class="box2">1111</div>
</div>
<div class="box1">
<div class="box2">222</div>
</div>
<div class="box1">
<div class="box2">333</div>
</div>
后面还有很多个这样的DIV
因为还有二十几个地方都要用到这个JS效果.急急急。小弟不胜感激
我用jQuery把他做好了，代码如下：
$(function()
{
$('.box1').mouseenter(function a(){
$(this).children(".box2").stop().animate({
top:'50px',
},500)
})
$('.box1').mouseleave(function b(){
$(this).children(".box2").stop().animate({
top:'150px',
},500)
})
})
</script> 展开
.box1{
width:200px;
height:200px;
border:1px solid #000000;
margin:5px;
overflow:hidden;
position:relative;}
.box2{
width:200px;
height:150px;
background:#3A00FF;
position:absolute;
top:150px;}
这是DIV布局
<div class="box1">
<div class="box2">1111</div>
</div>
<div class="box1">
<div class="box2">222</div>
</div>
<div class="box1">
<div class="box2">333</div>
</div>
后面还有很多个这样的DIV
因为还有二十几个地方都要用到这个JS效果.急急急。小弟不胜感激
我用jQuery把他做好了，代码如下：
$(function()
{
$('.box1').mouseenter(function a(){
$(this).children(".box2").stop().animate({
top:'50px',
},500)
})
$('.box1').mouseleave(function b(){
$(this).children(".box2").stop().animate({
top:'150px',
},500)
})
})
</script> 展开
2个回答
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #faa;
margin: 20px;
}
.box2{
margin-top: 200px;
transition: margin-top 2s linear 0s;
}
.box1:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
box1.onmouseover = function (){
box2.style.marginTop = "100px";
}
box1.onmouseout = function (){
box2.style.marginTop = "200px";
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #faa;
margin: 20px;
}
.box2{
margin-top: 200px;
transition: margin-top 2s linear 0s;
}
.box1:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div class="box1">div1</div>
<div class="box2">div2</div>
<script type="text/javascript">
var box1 = document.getElementsByClassName("box1")[0];
var box2 = document.getElementsByClassName("box2")[0];
box1.onmouseover = function (){
box2.style.marginTop = "100px";
}
box1.onmouseout = function (){
box2.style.marginTop = "200px";
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
深圳市睿讯世纪科技有限公司
2019-11-28 广告
数字KVM切换器AD416哪家性价比好一点？深圳市睿讯世纪科技有限公司，深圳市睿讯世纪科技有限公司是集研发、生产、销售和售后服务于一体的综合型电子科技企业。公司拥有多年行业经验，大多数城市都设有分公司，公司配有专业的技术团队和完善的服务体系...
点击进入详情页
本回答由深圳市睿讯世纪科技有限公司提供
展开全部
<script>
var box1=document.querySelector('.box1')
var box2=document.querySelector('.box2')
var num=150
box1.onmouseenter=function(){
var t=setInterval(function(){
num--
box2.style.top=num+'px'
num==50&&clearInterval(t)
},5)
}
box1.onmouseleave=function(){
var t=setInterval(function(){
num++
box2.style.top=num+'px'
num==150&&clearInterval(t)
},5)
}
</script>
var box1=document.querySelector('.box1')
var box2=document.querySelector('.box2')
var num=150
box1.onmouseenter=function(){
var t=setInterval(function(){
num--
box2.style.top=num+'px'
num==50&&clearInterval(t)
},5)
}
box1.onmouseleave=function(){
var t=setInterval(function(){
num++
box2.style.top=num+'px'
num==150&&clearInterval(t)
},5)
}
</script>
更多追问追答
追问
谢谢你的回答，谢谢。好像只有第一个能动，其他的动不了了。还有如果鼠标再移动几次，box2就移动的不见了
追答
var box1 = document.querySelectorAll('.box1')
var box2 = document.querySelectorAll('.box2')
var up
var down
box1.forEach(function(item,index){
item.onmouseenter = function() {
clearInterval(down)
var box2Now=box2[index]
up=setInterval(function(){
var top=parseInt(getComputedStyle(box2Now)['top'])
top--
box2Now.style.top=top+'px'
top149&&clearInterval(down)
}, 5)
}
})
//这个效果有个问题，当从一个框移除，马上到下一个框的时候，上一个框的动画会暂停。
//如果也想上一个框运动完。那么就把clearInterval(down)和clearInterval(up)注释掉。
//但是这样会出现很多问题，页面会有很多定时器。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
