本文通过一个JavaScript实现的折叠展开动画示例，详细解析了CSS绝对定位与相对定位的配合使用，以及JS中element.style.left与offsetLeft的区别。重点探讨了鼠标事件处理、目标位置计算及定时器清除机制，旨在帮助开发者掌握基础运动效果的核心逻辑。
JavaScript折叠展开动画实现概述
本文通过一个具体的JavaScript折叠展开动画示例，详细介绍其实现原理与代码逻辑，供读者参考学习。
CSS样式与HTML结构配置
<!DOCTYPE = html>
<html>
<head>
<title>www.jb51.net JS折叠展开动画</title>
<style>
body{
margin: 0px;
padding: 0px;
}
.red{
background-color:red;
width:200px;
height:200px;
position:relative;
left:-200px;
top:0px;
}
.blue{
background:blue;
width:20px;
height:50px;
position:absolute;
left:200px;
top:75px;
}
</style>
</head>
<body>
<div class="red" id="cf1"><div class="blue" id="cf">分享</div></div>
<script>
window.onload = function(){
var onDiv = document.getElementById("cf1");
onDiv.onmouseover = function(){
startmove(0);
}
onDiv.onmouseout = function(){
startmove(-200);
}
}
var timer ;
function startmove(target){
clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
var onDiv1 = document.getElementById("cf1");
timer = setInterval(function(){
var speed = 0;
if(onDiv1.offsetLeft<target){
speed = 10;
}else{
speed = -10;
}
if(onDiv1.offsetLeft==target){
clearInterval(timer);
}
else{
onDiv1.style.left = onDiv1.offsetLeft+speed+'px';
}
},30)
}
</script>
</body>
</html>
实际运行时的视觉效果如下所示：
实现过程中的关键要点总结如下：
首先处理CSS样式部分：
1、务必进行样式初始化； 2、回顾CSS文件的引用方法，此处采用类选择器方式； 3、明确绝对定位与相对定位的关系：父容器需设置为relative，子元素设置为absolute。
JavaScript核心逻辑与运动控制
接下来处理JavaScript逻辑部分：
1、区分element.style.left与element.offsetLeft的差异：
① 前者返回带有px单位的字符串，后者返回纯数值； ② 更多详细信息可参考：https://www.jb51.net/article/43981.htm
2、初始思路可能不够清晰，关键在于抽象出鼠标悬停和移开时的目标位置变量，二者仅目标位置不同。
3、函数设计应遵循参数最小化原则，在满足功能需求的前提下尽量减少参数数量。
4、鼠标事件的作用对象建议设置为父级div，否则可能引发闪烁现象（即刚触发onmouseover，元素移除又触发onmouseout）。
5、必须注意清除定时器：① 防止运动过程中速度不稳定；② 确保到达目标位置后停止运动。
浏览器设置与其他注意事项
其他补充说明：
问题：如何在谷歌浏览器中解除对弹出窗口的禁止？
解答：依次进入设置 -> 高级设置 -> 隐私设置 -> 内容设置 -> 弹出式窗口，进行相应配置即可。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述的实现方法对JavaScript程序设计有所帮助。