案例:开机动画

由上下两部分组成,先下面的高变为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. java基础之System类

    System类概述System 类包含一些有用的类字段和方法.它不能被实例化. 成员方法 public static void gc()运行垃圾回收器 public static void exit( ...

  2. 安装配置git服务

    创建git用户和组 groupadd -g git useradd -md /home/git -g -u git 安装依赖包 yum install curl-devel expat-devel g ...

  3. /proc/cpuinfo和/proc/meminfo来查看cpu信息与内存信息

    #一般情况下使用root或者oracle用户查都可以. # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 --查 ...

  4. LUOGU P3960 列队 (noip2017 day2T3)

    传送门 解题思路 记得当时考试我还是个孩子,啥也不会QAQ.现在回头写,用动态开点的线段树,在每行和最后一列开线段树,然后对于每次询问,把x行y列的删去,然后再把x行m列的元素加入x行这个线段树,然后 ...

  5. bzoj4788: [CERC2016]Bipartite Blanket

    2019.1.9交流题,现在看还是不会,,, 如果只有一边,那么Hall定理即可. 两边?分别满足Hall定理,就是合法的! 证明(构造方案): 左集合先任意形成一个合法匹配,单点增量加入右集合和与右 ...

  6. 修改maven本地库路径

    1.打开maven的安装路径:${M2_HOME}/conf/setings.xml文件 2.找到<localRepository>项,将它的值修改就可以了,我修改的是:${M2_HOME ...

  7. Maven实战04_使用Archetype生成项目骨架

    在上一章中的HelloWorld中,我们的项目遵循了一些Maven项目的约定 在项目的根目录中放置pom.xml 在src/main/java目录中放置项目的主代码 在src/test/java目录中 ...

  8. IO流15 --- 数据流操作Java语言的基本数据类型 --- 技术搬运工(尚硅谷)

    写入数据 @Test public void test10() throws IOException { DataOutputStream dos = new DataOutputStream(new ...

  9. lost connection to MySQL server at waiting for initial communication packet,system error:o

    1 可以先测试mysql本地连接石否正常 2 正常的话查看远程连接的IP在mysql中是否有权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%'   IDENTIF ...

  10. Java 8 的新特性和Java 的4种引用方式

    一.接口的增强 Java 8允许我们给接口添加一个非抽象的方法实现,只需要使用 default关键字即可,这个特征又叫做扩展方法,示例如下: interface Formula { double ca ...