<style>
.box { width: 400px; padding: 20px; border: 40px solid #a0b3d6; background-color: #eee; overflow: hidden; }
.loading { height: 100%; background: url(images/loading.gif) no-repeat center; }
.in { width: 100px; margin: 0 auto; border: 50px solid #beceeb; background-color: #f0f3f9; }
[type=button] { width: 100px; height: 32px; font-size: 100%; }
</style>
</head>

<body>
　　<div id="main">
　　　　<div id="effect" class="part">
　　　　　　<div class="show">
　　　　　　　　<div class="demo">
　　　　　　　　　　<div id="box" class="box">
　　　　　　　　　　</div>
　　　　　　　　　　<p>
　　　　　　　　　　　　<input type="button" id="button" value="点击我">
　　　　　　　　　　</p>
　　　　　　　　</div>
　　　　　　</div>
　　　　</div>
　　　</div>
</div>

<script>
// 高度无缝动画方法
var funTransitionHeight = function(element, time) { // time, 数值，可缺省
if (typeof window.getComputedStyle == "undefined") return;
var height = window.getComputedStyle(element).height;
element.style.transition = "none"; // 本行2015-05-20新增，mac Safari下，貌似auto也会触发transition, 故要none下~
element.style.height = "auto";
var targetHeight = window.getComputedStyle(element).height;
element.style.height = height;
element.offsetWidth = element.offsetWidth;
if (time) element.style.transition = "height "+ time +"ms";
element.style.height = targetHeight;
};

(function() {
// demo演示脚本
var box = document.getElementById("box"), button = document.getElementById("button");
button.onclick = function() {
// 载入菊花，模拟loading效果
box.innerHTML = '<div class="loading"></div>';
// 随机高度内容
setTimeout(function() {
　　box.innerHTML = '<div class="in" style="height:'+ Math.round(400 * Math.random()) +'px;"></div>';
　　funTransitionHeight(box, 250);
　　}, 1000);
};

// 初始高度
funTransitionHeight(box);
})();
</script>

</body>

loading加载动画效果js实现的更多相关文章

  1. CSS动画实例：Loading加载动画效果（一）

    一些网站或者APP在加载新东西的时候,往往会给出一个好看有趣的Loading图,大部分的Loading样式都可以使用CSS3制作出来,它不仅比直接使用gif图简单方便,还能节省加载时间和空间.下面介绍 ...

  2. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  3. 原生JS+ CSS3创建loading加载动画；

    效果图: js创建loading show = function(){ //loading dom元素 var Div = document.createElement("div" ...

  4. HTML5 五彩圆环Loading加载动画实现教程

    原文:HTML5 五彩圆环Loading加载动画实现教程 今天我们要来介绍一款效果很特别的HTML5 Loading加载动画,不像其他的Loading动画,这款Loading动画颜色很丰富,并且在转圈 ...

  5. 2款不同样式的CSS3 Loading加载动画 附源码

    原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...

  6. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  7. QT自定义控件系列(二) --- Loading加载动画控件

    本系列主要使用Qt painter来实现一些基础控件.主要是对平时自行编写的一些自定义控件的总结. 为了简洁.低耦合,我们尽量不使用图片,qrc,ui等文件,而只使用c++的.h和.cpp文件. 由于 ...

  8. 加载动画效果 HTML+ CSS

    加载动画效果 写在前面 在无限的时间的河流里,人生仅仅是微小又微小的波浪.--郭小川 实现效果 实现原理 通过2个伪元素来设置3条颜色边框 通过定位将3个圆弧边框层叠再一起,再通过旋转实现一个圆的效果 ...

  9. 16款纯CSS3实现的loading加载动画

    分享16款纯CSS3实现的loading加载动画.这是一款实用的可替代GIF格式图片的CSS3加载动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div clas ...

随机推荐

  1. 2017-2018-2 20165314 实验三《 敏捷开发与XP实践》实验报告

    知识点: 1.XP团队使用现场客户.特殊计划方法和持续测试来提供快速的反馈和全面的交流: -XP是以开发符合客户需要的软件为目标而产生的一种方法论 -XP是一种以实践为基础的软件工程过程和思想 -XP ...

  2. python+selenium十四：xpath和contains模糊匹配

    xpath可以以标签定位,也可以@任意属性: 如:以input标签定位:driver.find_element_by_xpath("//input[@id='kw']") 如:@t ...

  3. Java 单字节、多字节读取文本文档中的内容

    文本文档位于工程下. 鼠标右击工程,选择“new - File”,即可创建. 文本文档的格式:GBK 单字节读取 import java.io.File; import java.io.FileInp ...

  4. C++ Primer 笔记——lambda表达式

    1.一个lambda表达式表示一个可调用的代码单元,可以理解为一个未命名的内联函数,但是与函数不同,lambda表达式可能定义在函数内部.其形式如下: [capture list] (paramete ...

  5. 启动tomcat出现内存溢出错误 java.lang.OutOfMemoryError: PermGen space

    三种因素引起: 1.jvm(jdk)的内存引起. 2. eclipse的内存引起. 3.tomcat的内存引起. 1.解决方法: 2.解决方法: 解决问题的方式就是:修改了安装目录eclipse.in ...

  6. 2019-3-9,Servlet转跳链接详解

    //以下代码,可以传递request和response对象及其属性和变量至指定页面 request.getRequestDispatcher("showAttribut.jsp") ...

  7. OpenCV trackbar 避免使用全局变量

    OpenCV trackbar 避免使用全局变量 在OpenCV中使用trackbar是交互式地图像处理的一种方式,例如用于图像阈值分割,用户可以一边调整阈值一边看效果.但是很不幸,绝大多数教程上使用 ...

  8. node.js vue-axios和vue-resource

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

  9. 连接Oracle时报错ORA-12541: TNS: 无监听程序

    从开始菜单中打开“Oracle Net Configuration Assistance”,选择“监听程序配置”,如下图所示,点击下一步.   选择“重新配置”,如下图所示,点击下一步.   选择监听 ...

  10. Quartz.NET作业调度框架的简单应用

    概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...