案例：开机动画

由上下两部分组成，先下面的高变为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. Mybatis-构建 SqlSessionFactory

    从 XML 中构建 SqlSessionFactory 每 一 个 MyBatis 的 应 用 程 序 都 以 一 个 SqlSessionFactory 对 象 的 实 例 为 核 心 . SqlS ...

  2. python3-常用模块之os

    os模块,os是和操作系统交互的模块 os.getcwd() :获取当前工作目录,即当前python脚本工作的目录路径,如果是命令行模式下,同样表示当前目录下 os.listdir(路径): 列出指定 ...

  3. 项目无法依赖Springboot打出的jar

    1.原因 因为springboot-maven-plugin打包的第一级目录为Boot-INF,无法引用 2.解决 不能使用springboot项目自带的打包插件进行打包 <build> ...

  4. appscan如何扫描移动应用APP

    1.前置条件:让手机和电脑处于同一WIFI下 1打开appscan,选择手动探索/外部设备. 2在弹出的对话框页面点击右上角“记录代理配置”. 3在弹出的页面选择记录代理页签,设置Appscan代理端 ...

  5. Java超简明入门学习笔记（三）

    Java编程思想第4版学习笔记(三) 第五章 初始化与清理(构造器和垃圾回收机制)         Java有和C++类似的构造函数来为新创建的对象执行初始化及完成一些特殊的操作,有的类数据成员可能会 ...

  6. Chapter 6 排序

    Chapter 6 排序 1-   直接插入排序 O(n2) O(1) 2-   折半插入排序 O(n2) O(1) 适合关键字较多 3-   希尔排序O(nlogn) O(1) 又名,缩小增量排序 ...

  7. js 倒计时毫秒级别显示

    <html> <head> <style> div{ width:100%; text-align:center; font-size: 14px; } </ ...

  8. matlab-变量类型-数组-矩阵

    1 变量类型 1.1基本 1.2 特殊变量 ans •i,j: complex number •Inf: 无穷大 •eps: 2.2204e-016 •NaN: not a number •pi:pa ...

  9. Linux设置复制粘帖的快捷方式

    一.快捷设置 安装gpm:yum install -y gpm* 开启gpm服务:systemctl start gpm 按住鼠标左键,选中想要复制的内容,松开就完成复制,再在复制的位置按右键就完成粘 ...

  10. tcpdump 抓包

    简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...