怎样操作JS实现简单折叠展开动画

来源：动视网责编：小采时间：2020-11-27 19:42:34

怎样操作JS实现简单折叠展开动画

怎样操作JS实现简单折叠展开动画:这次给大家带来怎样操作JS实现简单折叠展开动画，操作JS实现简单折叠展开动画的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE = html> <html> <head> <title>JS折叠展开动画</title> &

推荐度：

点击下载本文 文档为doc格式

导读怎样操作JS实现简单折叠展开动画:这次给大家带来怎样操作JS实现简单折叠展开动画，操作JS实现简单折叠展开动画的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE = html> <html> <head> <title>JS折叠展开动画</title> &

这次给大家带来怎样操作JS实现简单折叠展开动画，操作JS实现简单折叠展开动画的注意事项有哪些，下面就是实战案例，一起来看一下。

<!DOCTYPE = html>
<html>
 <head>
 <title>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>
 <p class="red" id="cf1"><p class="blue" id="cf">分享</p></p>
 <script>
 window.onload = function(){
 var onp = document.getElementById("cf1");
 onp.onmouseover = function(){
 startmove(0);
 }
 onp.onmouseout = function(){
 startmove(-200);
 }
 }
 var timer ;
 function startmove(target){
 clearInterval(timer);//清除定时器，以免多次触发定时器导致速度越来越快而不是匀速前进
 var onp1 = document.getElementById("cf1");
 timer = setInterval(function(){
 var speed = 0;
 if(onp1.offsetLeft<target){
 speed = 10;
 }else{
 speed = -10;
 }
 if(onp1.offsetLeft==target){
 clearInterval(timer);
 }
 else{
 onp1.style.left = onp1.offsetLeft+speed+'px';
 }
 },30)
 }
 </script>
 </body>
</html>

运行效果：