案例：开机动画

由上下两部分组成，先下面的高变为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. 关于Collection接口和Map

    Iterable才是Collection的父接口.不是Iterator. Map,SortedMap属于接口类型,不可以new的方式创建对象. HashMap基于哈希表实现Map接口的类,并允许nul ...

  2. Neo4j 第四篇：使用.NET驱动访问Neo4j

    本文使用的IDE是Visual Studio 2015 ,驱动程序是Neo4j官方的最新版本:Neo4j.Driver,创建的类库工程(Project)要求安装 .NET Framework 4.5. ...

  3. 阿里云服务器（一）——Nodejs环境配置

    最近在阿里云上买了一个轻量应用服务器,想着用来学习一下Nodejs. 64位 配置Nodejs环境: 参考:https://www.runoob.com/nodejs/nodejs-install-s ...

  4. vue页面刷新数据丢失问题

    参考: https://blog.csdn.net/aliven1/article/details/80743470          https://blog.csdn.net/liang37712 ...

  5. jQuery实现textarea高度根据内容自适应

    //jQuery实现textarea高度根据内容自适应 $.fn.extend({ txtaAutoHeight: function () { return this.each(function () ...

  6. 【核心核心】8.Spring【AOP】注解方式

    1.引入jar包 sprig框架基础包+JUntil整合包+日志包+AOP包 spring的传统AOP的开发的包 spring-aop-4.2.4.RELEASE.jar com.springsour ...

  7. tp5异常全局返回处理

    tp5 针对对异常,在debug模式下,会直接以页面返回的形式显示出各类错误.如果debug关机,显示 页面错误!请稍后再试- ThinkPHP V5.1.38 LTS { 十年磨一剑-为API开发设 ...

  8. Python Flask学习之安装SQL,python3,Pycharm（网上下载安装即可）

    1,下载时更改pypi源.可以额外安装虚拟化环境:pip install -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.co ...

  9. php条件语句（一）

    PHP If...Else 语句 条件语句用于根据不同条件执行不同动作. PHP 条件语句 当您编写代码时,您常常需要为不同的判断执行不同的动作.您可以在代码中使用条件语句来完成此任务. 在 PHP ...

  10. Linux上用户执行命令记录

    HFILE=`who -m | awk '{print $1}'`readonly HISTFILE=/var/history/$HFILE-$USER-$UID.logreadonly HISTFI ...