设置块级元素的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. django源码分析

    原文网址 https://www.jianshu.com/p/17d78b52c732?utm_campaign=maleskine&utm_content=note&utm_medi ...

  2. Servlet解决中文乱码问题

    request.setCharacterEncoding("UTF-8"); 并且把这句话放在request.getParameter()之前

  3. 在排序数组中查找元素的第一个和最后一个位置(给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。)

    示例 1: 输入: nums = [5,7,7,8,8,10], target = 8 输出: [3,4] 示例 2: 输入: nums = [5,7,7,8,8,10], target = 6 输出 ...

  4. HashMap实现原理简析及实现的demo（一看就明白）

    HashMap底层就是一个数组结构,数组中的每一项又是一个链表. jdk源码: transient Node<K,V>[] table; static class Node<K,V& ...

  5. rest模式get，post，put，delete简单讲解

    1.请求方法为get时,会向数据库请求数据,类似于select语言,只能达到查询的效果,不会添加,修改,不会影响资源的内容,无副作用 2.请求方法为post时,该方法,用于向服务器添加数据,可以改变数 ...

  6. html-form

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Django中的Request和Response

    接触Django这么久了,从来没有好好学习关于Django中的Request和Response对象.借着文件上传下载的相关工作,现在总结一下也不错. 当一个页面请求过来,Django会自动创建一个Re ...

  8. 牛客练习赛A 【BFS】

    <题目链接> 题目大意: 给出一张图,问你其中 ' # ' 加上那些不能够到达边界的 ' . ' 的点的个数,' # ' 会起阻挡作用. 解题分析: 本题很好做,无非就是将所有能够由边界上 ...

  9. ISP PIPLINE（零） 知识综述预热

    本文为camera isp pipline概述 ISP,即image signal processing.为图像成型做的处理工作.适应不同光学环境下图像的还原. pipline流程如下: 光通过LEN ...

  10. java里的基本数据类型和引用数据类型

    一.基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节,取值范围-128~127,默认值0 short:短整型,在内存中占16位,即2个字节,取值范围-32768 ...