JS实现的简单折叠展开动画效果示例


Posted in Javascript onApril 28, 2018

本文实例讲述了JS实现的简单折叠展开动画效果。分享给大家供大家参考,具体如下:

<!DOCTYPE = html>
<html>
 <head>
  <title>3water.com 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>

运行效果:

JS实现的简单折叠展开动画效果示例

小结:

一、css部分:

1、别忘记样式初始化;
2、复习css文件的引用方式;(类引用方式)
3、复习绝对定位和相对定位关系(父关系用relative;子关系用absolute

二、js部分:

1、element.style.left & element.offsetLeft区别:

① 前者单位是px,是字符串;后者单位是数值;
② 其他参见:https://3water.com/article/43981.htm

2、思路开始不够清晰,未能抽象出鼠标放上和移开关键变量——目标位置不同而已

3、函数参数尽可能少(在能达成目标的情况下)

4、鼠标作用对象设置为父级div最好,不然会出现闪烁情况(刚调用onmouseover,目标移除,又调用了onmouseout

5、注意清除定时器(①、防止移动时速度不稳定 ②、到目标位置停止运动)

三、其他:

Q:谷歌浏览器解除禁止弹出窗口?

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
Underscore源码分析
Dec 30 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
Javascript之深入浅出prototype
Feb 06 Javascript
详解Vue2.0里过滤器容易踩到的坑
Jun 01 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
Sep 21 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 #Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 #Javascript
详解Angular5 路由传参的3种方法
Apr 28 #Javascript
深入理解Vue nextTick 机制
Apr 28 #Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 #jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 #jQuery
Vue实现PopupWindow组件详解
Apr 28 #Javascript
You might like
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
Php图像处理类代码分享
2012/01/19 PHP
php读取mysql的简单实例
2014/01/15 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
JS中style属性
2006/10/11 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
微信小程序实现弹出菜单
2018/07/19 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
Python ZipFile模块详解
2013/11/01 Python
浅析使用Python操作文件
2017/07/31 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
对dataframe进行列相加,行相加的实例
2018/06/08 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
python中HTMLParser模块知识点总结
2021/01/25 Python
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
最新大学毕业求职简历的自我评价
2013/10/18 职场文书
文明礼仪小标兵事迹
2014/01/12 职场文书
社区交通安全实施方案
2014/03/22 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
家电创业计划书
2019/08/05 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
DIY胆机必读:各国电子管评价
2022/04/06 无线电
Java 多态分析
2022/04/26 Java/Android
mysql中关键词exists的用法实例详解
2022/06/10 MySQL