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 相关文章推荐
jquery 简单应用示例总结
Aug 09 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
解析JavaScript数组方法reduce
Dec 12 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
Jan 10 Javascript
Move.js入门
Feb 08 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
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
人族 TERRAN 概述
2020/03/14 星际争霸
黑夜路人出的几道php笔试题
2009/08/04 PHP
php数据访问之查询关键字
2016/05/09 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
2013/08/02 Javascript
js判断字符长度及中英文数字等
2014/03/19 Javascript
js基于cookie方式记住返回页面用法示例
2016/05/27 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
微信小程序用户授权,以及判断登录是否过期的方法
2019/05/10 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
[03:07]2015国际邀请赛选手档案EHOME.rOtK 是什么让他落泪?
2015/07/31 DOTA
使用python装饰器验证配置文件示例
2014/02/24 Python
python两种遍历字典(dict)的方法比较
2014/05/29 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
对python 合并 累加两个dict的实例详解
2019/01/21 Python
Django的用户模块与权限系统的示例代码
2019/07/24 Python
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
酒店副总岗位职责
2013/12/24 职场文书
会计毕业自我鉴定
2014/02/05 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
汽车专业求职信
2014/06/05 职场文书
2015年银行个人工作总结
2015/05/14 职场文书
运动会通讯稿600字
2015/07/20 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python