案例：开机动画

由上下两部分组成，先下面的高变为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. ArrayBlockingQueue的使用案例:

    ArrayBlockingQueue的介绍: ArrayBlockingQueue,顾名思义:基于数组的阻塞队列.数组是要指定长度的,所以使用ArrayBlockingQueue时必须指定长度,也就是 ...

  2. springmvc-环境配置-架构-配合mybatis-参数绑定

    1.1. Spring入门 1.1.1. Springmvc是什么 Spring web mvc和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从Spring的整体结构中看得 ...

  3. sql草稿

    参考:MySQL 内连接.外连接.左连接.右连接.全连接 SELECT count(*) FROM `t_product_base` select m_name from t_medicinal_in ...

  4. PKUWC 2018 真实排名

    PKUWC2018 真实排名 题面描述 共有\(n\)个人,每个人有一个能力值,每个人的排名为所有能力值不比他小的人的个数(包括他自己). 现在有\(k\)个人能力值翻倍,但我们无法得知是哪\(k\) ...

  5. python re.sub详解

    re.sub(pattern, repl, string, count=0, flags=0) re.sub的含义,作用,功能就是: 对于输入的一个字符串,利用正则表达式(的强大的字符串处理功能),去 ...

  6. 阿里云 Aliplayer高级功能介绍(六)：进度条标记

    基本介绍 Aliplayer在进度条上提示时间和缩略图功能外,还可以进行视频内容的提示打点,当然不止是进度条上显示打点的内容,还提供一组接口,方便用户进行打点时间和内容的获取, 基本UI如下图所示: ...

  7. bootstrap面包屑在ie8下显示重叠,鼠标点击显示效果正常

    ie8下加载后的显示 点击之后的显示 主要是li标签宽度auto引起的,可以设置li标签的最小宽度 <ol class="breadcrumb"> <li id= ...

  8. Android Studio增加assets目录、raw目录

    assets与res/raw不同 assets目录是Android的一种特殊目录,用于放置APP所需的固定文件,且该文件被打包到APK中时,不会被编码到二进制文件. Android还存在一种放置在re ...

  9. PAT甲级——A1030 Travel Plan

    A traveler's map gives the distances between cities along the highways, together with the cost of ea ...

  10. PAT甲级——A1027 Colors in Mars

    People in Mars represent the colors in their computers in a similar way as the Earth people. That is ...