案例：开机动画

由上下两部分组成，先下面的高变为0 ，再最大的div宽为0，形成一个缩小到没有的动画效果

点击的X是在背景图上的，在上面设置了一个空的span用于注册点击事件

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    .box {

      width: 322px;

      position: fixed;

      bottom: 0;

      right: 0;

      overflow: hidden;

    }

    span {

      position: absolute;

      top: 0;

      right: 0;

      width: 30px;

      height: 20px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <div class="box" id="box">

    <span id="closeButton"></span>

    <div class="hd" id="headPart">

      <img src="data:images/t.jpg" alt="" />

    </div>

    <div class="bd" id="bottomPart">

      <img src="data:images/b.jpg" alt="" />

    </div>

  </div>

  <script src="common.js"></script>

  <script>

    my$("closeButton").onclick = function () {

      //设置最下面的div高渐渐变为0，里面加个回掉函数

      animate(my$("bottomPart"), { "height": 0 }, function () {

        animate(my$("box"), { "width": 0 });

      });

    };

  </script>

</body>

</html>

JS---案例：开机动画的更多相关文章

  1. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  2. 如何使用js捕获css3动画

    如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...

  3. 纯css做的安卓开机动画

    随着css3的发展,越来越多的负责绚丽的效果可以由纯css来完成了.用css3实现的动画效果丝毫不必js实现的逊色,而且浏览器对css渲染的速度远比js快,大多数时候css的体积也不js小.其中css ...

  4. CSS3_移动端_开机动画

    移动端的 开机动画 <meta name="viewport" content="width=device-width, initial-scale=1, user ...

  5. Android开机动画

    Android系统的开机动画可分为三个部分,kernel启动,init进程启动,android系统服务启动.这三个开机动画都是在一个叫做 帧缓冲区(frame buffer)的硬件设备上进行渲染绘制的 ...

  6. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  7. Android隐藏虚拟按键，关闭开机动画、开机声音

    /*********************************************************************** * Android隐藏虚拟按键,关闭开机动画.开机声音 ...

  8. 理论制作 Windows 开机动画

    第一次接触 Windows 开机动画是 2012 年,那时候魔方的版本号还是 3.12,魔方里面有个很酷炫狂霸拽的功能就是替换 Windows 7 的开机动画.一开始我是在IT之家论坛里下载开机动画, ...

  9. Android 开机动画启动过程详解

    Android 开机会出现3个画面: 1. Linux 系统启动,出现Linux小企鹅画面(reboot)(Android 1.5及以上版本已经取消加载图片): 2. Android平台启动初始化,出 ...

随机推荐

  1. sed awk 练习

    #定位到某一行 添加内容 lower_case_flag=`cat /etc/my.cnf|grep "^lower_case_table_names"` if [ "X ...

  2. 《DSP using MATLAB》Problem 8.27

    7月底,又一个夏天,又一个火热的夏天,来到火炉城武汉,天天高温橙色预警,到今天已有二十多天. 先看看住的地方 下雨的时候是这样的 接着做题 代码: %% ----------------------- ...

  3. 04_Spring AOP两种代理方法

    什么是AOP?           AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是O ...

  4. 将ERF格式转换成PCAP格式

    在研究网络流量分析的时候,wireshark默认采用pcap格式.对于用Endace DAG捕捉卡捕获的数据包,一般来说,都是erf格式的.一般来说,此种格式包含了更多了链路层信息.而我们采用wire ...

  5. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  6. 简单排列习题2.5 的 2 - 6 P35

    用1,2,3,...9组成3个3位数abc, def, ghi:每个数字恰好用一次,要求 abc:def :ghi = 1: 2 : 3:按照abc : def : ghi的格式输出. 通常想到的思路 ...

  7. [转]Expression Blend实例中文教程(8) - 动画设计快速入门StoryBoard

    上一篇,介绍了Silverlight动画设计基础知识,Silverlight动画是基于时间线的,对于动画的实现,其实也就是对对象属性的修改过程. 而Silverlight动画分类两种类型,From/T ...

  8. LUOGU P1965 转圈游戏 (Noip 2013)

    传送门 解题思路 比较简单的模拟题,转圈一定有一个循环节,而且循环节长度一定小于m,因为循环节是一个%m的剩余系,然后一遍模拟记录下来循环节,快速幂即可. #include<iostream&g ...

  9. javascript的Touch事件

    js的touch事件,一般用于移动端的触屏滑动 $(function(){document.addEventListener("touchmove", _touch, false) ...

  10. angularjs中动态为audio绑定src问题总结

    先上代码 <div class="block_area block_audio" ng-show="model.url"> <audio co ...