设置块级元素的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. 【Android】spannableStringBuilder

    EditText: 通常用于显示文字,但有时候也需要在文字中夹杂一些图片,比如QQ中就可以使用表情图片,又比如需要的文字高亮显示等等,如何在android中也做到这样呢? 记得android中有个an ...

  2. kafka其中一台节点坏掉的迁移或者数据迁移

    kafka版本:适用于目前2.0以下 第一步: 假如有一个topic叫做test,当前topic的详情是这样的: [cdh@cdh1 kafka_2.11-1.0.1]$ bin/kafka-topi ...

  3. Vim的合并行操作

    日常常用到多行合并的功能,记录如下: 第一种, 多行合并成一行,即: AAAAABBBBBCCCCC 合并为:AAAAA BBBBB CCCCC 方法1: normal状态下 3J 其中的3是范围,可 ...

  4. miniui中可以设置是否让页面进行分页 <div id="datagrid1" class="mini-datagrid" style="width:100%" allowAlternating="true" showpager="true"/> 就是设置showpager属性为true

    <div id="datagrid1" class="mini-datagrid" style="width:100%" allowA ...

  5. 找bug hhh

    http://oj.acm.zstu.edu.cn/JudgeOnline/problem.php?id=4434 没有用队列,疯狂找不到bug,后来发现很简单的判断时==n和m了,本来心花怒放,测试 ...

  6. js算法初窥07（算法复杂度）

    算法复杂度是我们来衡量一个算法执行效率的一个度量标准,算法复杂度通常主要有时间复杂度和空间复杂度两种.时间复杂度就是指算法代码在运行最终得到我们想要的结果时所消耗的时间,而空间复杂度则是指算法中用来存 ...

  7. Intellij IDEA更改项目优先编译顺序

    今天启动公司项目突然发现了一个问题,类里面明明有这个方法,但是无论怎样都不编译.(由于公司项目是二次开发,代码都是第三方写的,代码请勿仔细看,怕伤了你的眼睛.) 如图,找不到setJGMC方法. 但是 ...

  8. PAT (Advanced Level) Practise 1002 解题报告

    GitHub markdownPDF 问题描述 解题思路 代码 提交记录 问题描述 A+B for Polynomials (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 ...

  9. python 3.6 + numpy + matplotlib + opencv + scipy 安装

    首先,下载并安装 python3.6: 然后,在网址http://www.lfd.uci.edu/~gohlke/pythonlibs/ 上 分别下载 numpy.scipy.matplotlib.o ...

  10. VMware5.5-虚拟机的迁移和资源分配

    虚拟机的迁移 迁移:将虚拟机从一台主机(或数据存储)移到另一台主机(或数据存储). 迁移类型: 冷迁移 迁移处于关闭状态的虚拟机. 挂起 迁移处于挂起状态的虚拟机. vMotion 迁移处于开启状态的 ...