如何在javascript中正确实现滑动动画？
在我学习javascript的过程中，我制作了相同的滑块，但是javascript上的动画（使用css对我来说不是问题-它是在google网站上制作的），如下所示： 原始谷歌滑块（带有css的动画）：如何在javascript中正确实现滑动动画？,javascript,jquery,animation,slider,settimeout,Javascript,Jquery,Animation,Slider,Settimeout,在我学习javascript的过程中，我制作了相同的滑块，但是javascript上的动画（使用css对我来说不是问题-它是在google网站上制作的），如下所示： 原始谷歌滑块（带有css的动画）： 我目前的工作： #宣传片{ 显示：块； 高度：354px； 宽度：790px； } .宣传品{ 宽度：81px； 高度：354px； 浮动：左； } .promo-item.wide{ 宽度：613px； } .三便士{ 背景色：rgb（206、203、203）； } .oneP{ 背景色：
我目前的工作：
#宣传片{
显示：块；
高度：354px；
宽度：790px；
}
.宣传品{
宽度：81px；
高度：354px；
浮动：左；
}
.promo-item.wide{
宽度：613px；
}
.三便士{
背景色：rgb（206、203、203）；
}
.oneP{
背景色：rgb（24122182）；
}
twoP先生{
背景色：rgb（187217226）；
}
var oneP=document.getElementById（'oneP'）；
var twoP=document.getElementById（'twoP'）；
var threeP=document.getElementById（'threeP'）；
步骤=1；
函数expandPanel1（）{
var h=oneP.clientWidth+step；
oneP.style.width=h+“px”；
如果（h<614 | | h！=614）{
setTimeout（“expandPanel1（）”，5）；
}else{oneP.style.width=613+“px”；}
}
函数expandPanel2（）{
var h=twoP.clientWidth+step；
twoP.style.width=h+“px”；
如果（h<614 | | h！=614）{
setTimeout（“expandPanel2（）”，5）
}else{twoP.style.width=613+“px”；}
}
函数expandPanel3（）{
var h=三p.clientWidth+步长；
三p.style.width=h+“px”；
如果（h<614 | | h！=614）{
setTimeout（“expandPanel3（）”，5）
}else{threeP.style.width=613+“px”；}
}
//---------------------------------------------
函数expandPanel1Minus（）{
var h=oneP.clientWidth-步长；
oneP.style.width=h+“px”；
如果（h>80 | | h！=80）{
setTimeout（“expandPanel1Minus（）”，5）
}else{oneP.style.width=81+“px”；}
}
函数expandPanel2Minus（）{
var h=twoP.clientWidth-步长；
twoP.style.width=h+“px”；
如果（h>80 | | h！=80）{
setTimeout（“expandPanel2Minus（）”，5）
}else{twoP.style.width=81+“px”；}
}
函数expandPanel3Minus（）{
var h=三p.clientWidth-步长；
三p.style.width=h+“px”；
如果（h>80 | | h！=80）{
设置超时（“expandPanel3Minus（）”，5）
}else{threeP.style.width=81+“px”；}
}
//---------------------------------------------
oneP.onmouseover=函数（）{
扩展面板1（）
expandPanel3Minus（）
expandPanel2Minus（）
}
twoP.onmouseover=函数（）{
扩展面板2（）
expandPanel3Minus（）
expandPanel 1分钟（）
}
threeP.onmouseover=函数（）{
扩展面板3（）
expandPanel2Minus（）
expandPanel 1分钟（）
}
有人能给我一些关于如何正确实现的指导吗？这里是一个纯JS实现-。如果小提琴没有被保存，这里只有JS位。HTML的其余部分与OP相同。函数
govar f, s, t;
var which;
function go() {
f = document.getElementById('oneP');
s = document.getElementById('twoP');
t = document.getElementById('threeP');
which = s;
f.onmouseover = function() {
foo(this)
};
s.onmouseover = function() {
foo(this)
};
t.onmouseover = function() {
foo(this)
};
}
function foo(e) {
if (e.clientWidth < 613) {
e.style.width = (e.clientWidth) + 10 + "px";
which.style.width = (which.clientWidth - 10) + "px";
setTimeout(function() {
foo(e);
}, 5);
}
else if (e.clientWidth > 613) {
e.style.width = "613px";
which.style.width = "81px";
which = e;
}
}
var f，s，t；
var，其中；
函数go（）{
f=document.getElementById（'oneP'）；
s=document.getElementById（'twoP'）；
t=document.getElementById（'threeP'）；
其中=s；
f、 onmouseover=函数（）{
傅（本）
};
s、 onmouseover=函数（）{
傅（本）
};
t、 onmouseover=函数（）{
傅（本）
};
}
函数foo（e）{
如果（如客户端宽度<613）{
e、 style.width=（e.clientWidth）+10+“px”；
which.style.width=（which.clientWidth-10）+“px”；
setTimeout（函数（）{
傅（e）；
}, 5);
}
否则如果（如客户端宽度>613）{
e、 style.width=“613px”；
which.style.width=“81px”；
其中=e；
}
}
我认为还有一点工作要做，动画速度不够快，所以可以在动画运行时将鼠标移到另一个部分上。我把这一点留给你：）如果你想节省很多时间，你应该用jQuery来做。试试这个解决方案。在那个例子中，我不喜欢调整div的大小。我使用Z索引和jQuery动画来移动它们。这样就更容易为他们确定正确的位置
<style>
#promo{
width:900px;
height:300px;
position:absolute;
top:0px;
left:0px;
overflow:hidden;
}
#oneP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:0px;
background:#999;
z-index:1;
}
#twoP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:150px;
background:#ddd;
z-index:0;
}
#threeP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:750px;
background:#666;
z-index:1;
}
</style>
<html>
<div id="promo">
<div id="oneP">
</div>
<div id="twoP">
</div>
<div id="threeP">
</div>
</div>
</html>
<script>
$('#oneP').mouseover(function() {
$('#oneP').animate({
left: 0
},200);
$('#threeP').animate({
left: 750
},200);
$('#twoP').animate({
left: 450
},200);
});
$('#twoP').mouseover(function() {
$('#oneP').animate({
left: -450
},200);
$('#threeP').animate({
left: 750
},200);
$('#twoP').animate({
left: 150
},200);
});
$('#threeP').mouseover(function() {
$('#threeP').animate({
left: 300
},200);
$('#oneP').animate({
left: -450
},200);
$('#twoP').animate({
left: -150
},200);
});
</script>`
#宣传片{
宽度：900px；
高度：300px；
位置：绝对位置；
顶部：0px；
左：0px；
溢出：隐藏；
}
#奥尼普{
宽度：600px；
高度：300px；
位置：绝对位置；
顶部：0px；
左：0px；
背景：#999；
z指数：1；
}
#两个{
宽度：600px；
高度：300px；
位置：绝对位置；
顶部：0px；
左：150px；
背景：ddd；
z指数：0；
}
#三个{
宽度：600px；
高度：300px；
位置：绝对位置；
顶部：0px；
左：750px；
背景:#666；
z指数：1；
}
$（'#oneP'）.mouseover（函数（）{
$（'#oneP'）。设置动画({
左：0
},200);
$（“#三个P”）。设置动画({
左：750
},200);
$（'twoP'）。设置动画({
左：450
},200);
});
$（'#twoP'）.mouseover（函数（）{
$（'#oneP'）。设置动画({
左：-450
},200);
$（“#三个P”）。设置动画({
左：750
},200);
$（'twoP'）。设置动画({
<style>
#promo{
width:900px;
height:300px;
position:absolute;
top:0px;
left:0px;
overflow:hidden;
}
#oneP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:0px;
background:#999;
z-index:1;
}
#twoP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:150px;
background:#ddd;
z-index:0;
}
#threeP{
width:600px;
height:300px;
position:absolute;
top:0px;
left:750px;
background:#666;
z-index:1;
}
</style>
<html>
<div id="promo">
<div id="oneP">
</div>
<div id="twoP">
</div>
<div id="threeP">
</div>
</div>
</html>
<script>
$('#oneP').mouseover(function() {
$('#oneP').animate({
left: 0
},200);
$('#threeP').animate({
left: 750
},200);
$('#twoP').animate({
left: 450
},200);
});
$('#twoP').mouseover(function() {
$('#oneP').animate({
left: -450
},200);
$('#threeP').animate({
left: 750
},200);
$('#twoP').animate({
left: 150
},200);
});
$('#threeP').mouseover(function() {
$('#threeP').animate({
left: 300
},200);
$('#oneP').animate({
left: -450
},200);
$('#twoP').animate({
left: -150
},200);
});
</script>`