设置块级元素的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. 【Codeforces】Codeforces Round #551 (Div. 2)

    Codeforces Round #551 (Div. 2) 算是放弃颓废决定好好打比赛好好刷题的开始吧 A. Serval and Bus 处理每个巴士最早到站且大于t的时间 #include &l ...

  2. 将input或textarea设置为disabled的样式问题

    input:disabled{ -webkit-text-fill-color: #333;//是用来做填充色使用的 -webkit-opacity: 1; color: #333; } textar ...

  3. Docker docker-compose安装

    一.在服务器上敲下面命令即可,将需要的版本号修改一下即可 sudo curl -L "https://github.com/docker/compose/releases/download/ ...

  4. AtCoder Regular Contest 102 (ARC102) D All Your Paths are Different Lengths 构造

    原文链接https://www.cnblogs.com/zhouzhendong/p/ARC102D.html 题目传送门 - ARC102D 题意 给定 $L$,请你构造一个节点个数为 $n$ ,边 ...

  5. 通过mysql-proxy映射外网访问内网数据库

    配置教程: 转自:http://www.centoscn.com/mysql/2015/0107/4437.html centos安装mysql-proxy mysql-proxy的用处就不再说了 m ...

  6. svn创建分支（branch/tag）出现“path”already exists

    不用在visual svn中创建相应的目录,svn会自己创建目录,但是自己必须指定该目录名称. 比如:

  7. 事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

    ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse ...

  8. Python操纵Excel，数据库

    操作excelxlwt:写入excel表格 ,用这个之前需要先导入模块 xlwt: import xlwtxlrd:读取excel,用这个之前需要先导入模块 xlwt:import xlrd 注意:e ...

  9. Codeforces 998D. Roman Digits 【打表找规律】

    <题目链接> 题目大意: 现在有无限个 1,5,10,50这四个数字,从中恰好挑选n个数字,问你这些数字的和总共有多少种不同的情况. 解题分析: 由于此题 n 的范围特别大,达到了1e9, ...

  10. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...