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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
jquery得到font-size属性值实现代码
Sep 30 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
vue组件学习教程
Sep 09 Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
Oct 23 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 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 的几个配置文件函数
2006/12/21 PHP
adodb与adodb_lite之比较
2006/12/31 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
用Zend Encode编写开发PHP程序
2010/02/21 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
YII Framework框架教程之日志用法详解
2016/03/14 PHP
php格式文件打开的四种方法
2018/02/24 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
jQuery find和children方法使用
2011/01/31 Javascript
js 浏览器事件介绍
2012/03/30 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
2016/08/29 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
AngularJs 禁止模板缓存的方法
2017/11/28 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
JS精确判断数据类型代码实例
2019/12/18 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
python爬取微信公众号文章
2018/08/31 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
Python列表操作方法详解
2020/02/09 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
运动会拉拉队口号
2014/06/09 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
走群众路线剖析材料
2014/10/09 职场文书
旷课检讨书500字
2014/10/14 职场文书
感谢信怎么写
2015/01/21 职场文书
入党介绍人考察意见
2015/06/01 职场文书
培训班开班主持词
2015/07/02 职场文书
教师节班会主持词
2015/07/06 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书