案例：开机动画

由上下两部分组成，先下面的高变为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. PAT甲级——A1090 Highest Price in Supply Chain

    A supply chain is a network of retailers(零售商), distributors(经销商), and suppliers(供应商)-- everyone invo ...

  2. 定时ping取返回值并绘图

    figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...

  3. Python读写文件学习笔记

    一. 基础 1.创建文件夹 import os os.makedirs('I:\\pythonWorkPace') # 创建文件夹 2. 获取文件夹里面文件列表 import os # os.make ...

  4. Java8的HashMap笔记摘要

    问题例子: HashMap 是不是有序的? 不是有序的. 有没有有序的Map实现类呢?  有 TreeMap 和 LinkedHashMap. TreeMap 和 LinkedHashMap 是如何保 ...

  5. leyou_06_图片上传至FastDFS

    1.推荐一个开源的FastDFS客户端,支持最新的SpringBoot2.0.配置使用极为简单,支持连接池,支持自动生成缩略图 1.1 在文件上传的微服务中 引入依赖 <dependency&g ...

  6. 转：Linux--进程间通信（信号量，共享内存）

    源地址:http://www.cnblogs.com/forstudy/archive/2012/03/26/2413724.html Linux--进程间通信(信号量,共享内存)(转)   一. 信 ...

  7. PAT甲级——A1020 Tree Traversals

    Suppose that all the keys in a binary tree are distinct positive integers. Given the postorder and i ...

  8. hibernate 一对一注解

    bi如 用户的阅读历史和文章表是单向一对一关系, 阅读历史中通过deviceId外键关联文章表的主键 然后,再从getter setter上进行注解 @OneToOne(cascade = Casca ...

  9. Merge array and hash in ruby if key appears in array

    I have two arrays one = [1,2,3,4,5,6,7] and two = [{1=>'10'},{3=>'22'},{7=>'40'}] Two will ...

  10. service network restart 报错重启失败

    Job for network.service failed because the control process exited with error code. See “systemctl st ...