设置块级元素的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. MySQL主从数据同步延时分析

    一.MySQL数据库主从同步延迟                                                              要了解MySQL数据库主从同步延迟原理,我们 ...

  2. sparkStreaming序列化问题

    执行sparkSTreaming+kafka 报错如下: org.apache.spark.SparkException: Task not serializable ...... Caused by ...

  3. Zabbix监控Tomcat案例

    今天在这里,我们来聊一聊JMX监控方式, JMX(java管理扩展程序)是java平台上为应用程序,设备,系统等植入管理功能的框架,JMX可以跨越一系列不同的系统平台,更加灵活的服务管理应用: 在za ...

  4. js前端ajax提交list集合参数至后端

    var orderNosList = new Array(); var rows = $("#dg_linkOrder").datagrid("getChecked&qu ...

  5. Python学习（十二） —— 面向对象

    一.初识面向对象 面向过程的核心是过程,流水线思维,过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西. 优点:极大地降低了写程序的复杂度,只需要顺着要执行的 ...

  6. web.xml中使用web前缀配置无法访问controller

    <web:context-param> <web:param-name>contextConfigLocation</web:param-name> <web ...

  7. 4、Qt Project之串口数据传输

    串口数据传输: Step1:串口数据的发送和接收过程,我们需要单独的添加串口的相关模块进去,模块名称叫做serialport,我们需要建立的工程是QMainWindow的基类程序,不是QWidget程 ...

  8. 搭建本地maven库（nexus服务器）

    第一步,下载https://www.sonatype.com/download-oss-sonatype 别下3.x版本,下2.x版本 第二步,解压,在bin目录下执行cmd命令,nexus inst ...

  9. Qt Creator插件Todo

     转载:http://techieliang.com/2017/12/502/   文章目录 1. 插件启动 2. 插件效果 3. 插件配置 4. 使用 码代码的过程往往并不是一气呵成,有时候需要记录 ...

  10. nginx: [error] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)

    在重启nginx服务的时候,出现了这个错误. [root@izuf68g6a94fj32w0afx00z etc]# nginx -c /var/run/nginx/nginx.pid nginx: ...