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 THICKBOX弹出层插件
Aug 30 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
js Math 对象的方法
Sep 01 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
Bootstrap面板(Panels)的简单实现代码
Mar 17 Javascript
如何编写jquery插件
Mar 29 jQuery
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
微信小程序中转义字符的处理方法
Mar 28 Javascript
layui使用label标签的方法
Sep 14 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 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
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
php检查页面是否被百度收录
2015/10/28 PHP
thinkPHP实现多字段模糊匹配查询的方法
2016/12/01 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery学习笔记之Helloworld
2010/12/22 Javascript
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
vue中计算属性(computed)、methods和watched之间的区别
2017/07/27 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
判断“命令按钮”是否被鼠标单击详解
2019/07/31 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
python内存管理分析
2015/04/08 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Django中多种重定向方法使用详解
2019/07/17 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
一篇文章带你学习CSS3图片边框
2020/11/04 HTML / CSS
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
工厂门卫岗位职责范本
2014/04/04 职场文书
店铺转让协议书
2015/01/29 职场文书
理解python中装饰器的作用
2021/07/21 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript