设置块级元素的CSS属性overflow为hidden，然后动态改变height即可

var header=document.getElementsByTagName('header')[0];
header.style.transition='height 500ms';
header.style.overflow='hidden';

// slideUp
header.style.height='0';

// slideDown
header.style.height='70px';

用原生javascript写出jquery中slideUp和slideDown效果的更多相关文章

  1. css3实现jQuery的slideUp和slideDown效果

    最近打算做一些交互优化方面的轮子.虽然轮子别人都弄过,但是自己没弄过.重复造轮子对知识理解还是有好处的.本次轮子如题目.直接代码. <!DOCTYPE html> <html lan ...

  2. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  3. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  4. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数，在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  5. jQuery中的渐变动画效果

    jQuery中的渐变动画效果jQuery中的渐变动画效果

  6. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  7. 原生javascript写自己的运动库（匀速运动篇）

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  8. 用原生JavaScript写AJAX

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.听对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  9. 原生javascript实现类似jquery on方法的行为监听

    原生javascript有addEventListener和attachEvent方法来注册事件,但有时候我们需要判断某一行为甚至某一函数是否被执行了,并且能够获取前一行为的参数,这个时候就需要其他方 ...

随机推荐

  1. JMeter执行压测输出HTML图形化报表（一）

    一.应用场景 1.无需交互界面或受环境限制(linux text model) 2.远程或分布式执行 3.持续集成,通过shell脚本或批处理命令均可执行,生成的测试结果可被报表生成模块直接使用,便于 ...

  2. Codeforces 873E Awards For Contestants ST表

    原文链接https://www.cnblogs.com/zhouzhendong/p/9255885.html 题目传送门 - CF873E 题意 现在要给 $n(n\leq 3000)$ 个学生颁奖 ...

  3. JavaMelody 项目性能监控和调优工具

    转自 JavaMelody 可以实现对内存.CPU.线程.JDBC 连接数.HTTP 请求执行时间.SQL 执行时间(分析 Top SQL).方法执行时间(分析系统方法性能瓶颈)等等的监控. 配置方式 ...

  4. Service Fabric SfDevCluster目录从默认的C盘移动

    管理员权限打开Powershell CD\ 回车 CD "C:\Program Files\Microsoft SDKs\Service Fabric\ClusterSetup" ...

  5. LeetCode竞赛题：K 次取反后最大化的数组和（给定一个整数数组 A，我们只能用以下方法修改该数组：我们选择某个个索引 i 并将 A[i] 替换为 -A[i]，然后总共重复这个过程 K 次。）

    给定一个整数数组 A,我们只能用以下方法修改该数组:我们选择某个个索引 i 并将 A[i] 替换为 -A[i],然后总共重复这个过程 K 次.(我们可以多次选择同一个索引 i.) 以这种方式修改数组后 ...

  6. miniui表格load数据成功后，回调函数，其中setData要用如下方法

    init: function () { mini.parse(); this.grid = mini.get("jsDatagrid"); var grid1 = mini.get ...

  7. js根据银行卡号进行判断属于哪个银行并返回银行卡类型

    在做绑定银行卡,输入银行卡的时候,产品有这么一个需求,需要用户输入银行卡号的时候,显示对应的银行卡名称及简称.于是苦苦寻觅,终于找到了支付宝的开放API,银行卡校验接口 https://ccdcapi ...

  8. Fire! -两次dfs

    题目描述: Joe works in a maze. Unfortunately, portions of the maze have caught on fire, and the owner of ...

  9. [洛谷P1886]滑动窗口 (单调队列)(线段树)

    ---恢复内容开始--- 这是很好的一道题 题目描述: 现在有一堆数字共N个数字(N<=10^6),以及一个大小为k的窗口. 现在这个从左边开始向右滑动,每次滑动一个单位,求出每次滑动后窗口中的 ...

  10. 洛谷.3805.[模板]manacher算法

    题目链接 之前做很早了没写这篇,补上. 记录当前ex[]最大的回文中心id和最远延伸范围mx! 关于串的构造: 应该是 @ #A#B#C#B#A# $ ,而不是 @ A#B#C#B#A $ 比如 @a ...