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 走马灯简单实例
Nov 21 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
JavaScript的内存释放问题详解
Jan 21 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
vue键盘事件点击事件加native操作
Jul 27 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 Javascript
uniapp引入支付宝原生扫码插件步骤详解
Jul 23 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连接odbc数据源并保存与查询数据的方法
2014/12/24 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
js捕获鼠标滚轮事件代码
2013/12/16 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
vue中的scope使用详解
2017/10/29 Javascript
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
详解Nodejs mongoose
2018/06/10 NodeJs
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
python正则表达式re模块详解
2014/06/25 Python
Python3.x对JSON的一些操作示例
2017/09/01 Python
Python格式化输出字符串方法小结【%与format】
2018/10/29 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
Python实现多属性排序的方法
2018/12/05 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python 用所有标点符号分隔句子的示例
2019/07/15 Python
Python Django 添加首页尾页上一页下一页代码实例
2019/08/21 Python
基于python实现对文件进行切分行
2020/04/26 Python
python属于哪种语言
2020/08/16 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
计算机学生的自我评价分享
2014/02/18 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
电子商务专业求职信
2014/07/10 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
慰问信模板
2015/02/14 职场文书
警告通知
2015/04/25 职场文书
研讨会致辞
2015/07/31 职场文书
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers