本文描述了用JS实现的简单的折叠和展开动画效果。分享给大家参考，如下：

！doctype=html html head titlewww.jb51.net js折叠和展开动画/标题样式正文{ margin: 0pxpadding: 0px} .红色{背景色： red；宽度width:200px高度：200 px；位置：相对；left :-200 px；top:0px} .蓝色{ background:blue宽度：20 px；高度：50 px；位置：绝对；left:200pxtop:75px}/style/head body div class=' red ' id=' cf1 ' div class=' blue ' id=' cf ' share/div/div script window . onload=function(){ var on div=document . getelementbyid(' cf1 ')；ondiv . onmouseover=function(){ start move(0)；} OnDiv . onmouseout=function(){ start move(-200)；} } var计时器；函数startmove(目标){ clearInterval(计时器)；//清除定时器，以免多次触发定时器，导致速度越来越快，而不是匀速。var on div 1=document . getelementbyid(' cf1 ')；timer=setInterval(function(){ var speed=0；if(ondi v1 . offsetlefttarget){ speed=10；} else { speed=-10；} if(ondi v1 . offsetleft==target){ clearInterval(计时器)；} else { ondi v1 . style . left=ondi v1 . offsetleft speed ' px '；} }，30)}/脚本/正文/html运行效果：

总结：

一、css部分：

1.不要忘记样式初始化；2.复习css文件的引用方法；(类引用方法)3。回顾绝对定位和相对定位关系(父关系是相对的；子关系与绝对)

第二，js部分：

1.元素。风格。左元素。偏移差值：

(1)前者单位为px，为字符串；后一个单位是数值；其他见：//www . JB 51 . net/article/43981 . htm

2.一开始思路不够清晰，不可能抽象出鼠标放上和移开时键变量——的目标位置不同

3.功能参数尽可能少(如果目标可以实现)

4.最好将鼠标操作对象设置为父div，否则它会闪烁(onmouseover刚刚被调用，目标被移除，onmouseout再次被调用)

5.注意清除计时器(，防止移动时速度不稳定，在目标位置停止移动)

三.其他：

Q:谷歌浏览器解除弹出窗口封锁？

A:设置——高级设置——隐私设置——内容设置——弹出窗口，并进行相关设置。

更多对JavaScript相关内容感兴趣的读者可以查看本网站的主题：《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、0103010。

希望本文对JavaScript编程有所帮助。