手风琴

1、排他思想

2、ul宽度需要大一点，防止li撑开跑下去

3、一个变大其他所有变小，变小不能太小，不然会出现空白

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            width: 1200px;

            margin: 150px auto;

            border: 1px solid #CC6153;

            overflow: hidden;

        }

        ul {

            width: 1300px;

            height: 460px;

            list-style: none;

        }

        li {

            float: left;

            width: 240px;

            height: 460px;

        }

    </style>

</head>

<body>

<div>

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<script>

    var div = document.getElementsByTagName("div")[0];

    var ul = div.children[0];

    var liArr = ul.children;

    for (var i = 0; i < liArr.length; i++) {

        liArr[i].style.background = "url('images/" + (i + 6) + ".jpg') no-repeat";

        liArr[i].onmouseover = function () {

            for (var j = 0; j < liArr.length; j++) {

                animate(liArr[j], {"width": 120});

            }

            animate(this, {"width": 800})

        }

        liArr[i].onmouseout = function (ev) {

            for (var j = 0; j < liArr.length; j++) {

                animate(liArr[j], {"width": 240});

            }

        }

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json, fn) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader = parseInt(getStyle(ele, k)) || 0;

                //1.获取步长

                var step = (json[k] - leader) / 10;

                //2.二次加工步长

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                //3.赋值

                ele.style[k] = leader + "px";

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    ele.style[k] = json[k] + "px";

                }

                clearInterval(ele.timer);

                //所有程序执行完毕之后执行回调函数

                //现在只有传递了回调函数，才能执行

                if (fn) {

                    fn();

                }

            }

        }, 5);

    }

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(ele, null)[attr];

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

仿360开机

1、首先下盒子高度变为0，之后整体盒子宽度变为0

2、本例子没有用图片，最好盒子以图片形式为好

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .box {

            width: 200px;

            height: 300px;

            position: fixed;

            bottom: 0;

            right: 0;

        }

        span {

            position: absolute;

            top: 0;

            right: 0;

            width: 20px;

            height: 20px;

            font: 400 18px/20px "simsun";

            text-align: center;

            background-color: #ccc;

        }

        .up, .down {

            width: 200px;

            height: 150px;

            font: 400 23px/150px "simsun";

            text-align: center;

            background-color: #ccc;

        }

    </style>

</head>

<body>

<div class="box">

    <span>×</span>

    <div class="up">上盒子</div>

    <div class="down">下盒子</div>

</div>

<script>

    var span = document.getElementsByTagName("span")[0];

    var box = span.parentNode;

    var down = box.children[2];

    //开始让下盒子的高度变成0 之后让大盒子宽度变为0

    span.onclick = function () {

        animate(down, {"height": 0}, function () {

            animate(box, {"width": 0})

        });

    }

    //参数变为2个，将属性atrr和值都存储到json中

    function animate(ele, json, fn) {

        //先清定时器

        clearInterval(ele.timer);

        ele.timer = setInterval(function () {

            //开闭原则

            var bool = true;

            //遍历属性和值，分别单独处理json

            //attr == k(键)    target == json[k](值)

            for (var k in json) {

                //四部

                var leader = parseInt(getStyle(ele, k)) || 0;

                //1.获取步长

                var step = (json[k] - leader) / 10;

                //2.二次加工步长

                step = step > 0 ? Math.ceil(step) : Math.floor(step);

                leader = leader + step;

                //3.赋值

                ele.style[k] = leader + "px";

                //4.清除定时器

                //判断: 目标值和当前值的差大于步长，就不能跳出循环

                //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。

                // if (json[k] !== leader) {

                //     bool = false;

                // }

                if (Math.abs(json[k] - leader) > Math.abs(step)) {

                    bool = false;

                }

            }

            console.log(1);

            //只有所有的属性都到了指定位置，bool值才不会变成false；

            if (bool) {

                for (k in json) {

                    ele.style[k] = json[k] + "px";

                }

                clearInterval(ele.timer);

                ele.style.display = "none";

                //所有程序执行完毕之后执行回调函数

                //现在只有传递了回调函数，才能执行

                if (fn) {

                    fn();

                }

            }

        }, 15);

    }

    function getStyle(ele, attr) {

        if (window.getComputedStyle) {

            return window.getComputedStyle(ele, null)[attr];

        }

        return ele.currentStyle[attr];

    }

</script>

</body>

</html>

JS——缓慢动画封装案例的更多相关文章

  1. JS——缓慢动画封装

    在知道如何获取内嵌式和外链式的标签属性值之后,我们再次封装缓慢动画: 单个属性 <!DOCTYPE html> <html> <head lang="en&qu ...

  2. 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  3. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  4. js运动动画

    原文:js运动动画 今天简单的学了一下js运动动画,再此感谢慕课网的这位老师http://www.imooc.com/view/167,讲的很不错. 下面是我整理出来的结果. 知识点一:速度动画. 1 ...

  5. 好用的jquery.animateNumber.js数字动画插件

    在做公司的运营报告页面时,有一个数字累计增加的动画效果,一开始,毫无头绪,不知如何下手,于是上网查资料,发现大多都是用的插件来实现的,那么今天,我也来用插件jquery.animateNumber.j ...

  6. 使用WebGL + Three.js制作动画场景

    使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...

  7. JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  8. 用js实现动画效果核心方式

    为了做好导航菜单,有时候需要在菜单下拉的时候实现动画效果,所以这几天就研究了研究如何用js实现动画效果,实现动画核心要用到两个函数,一个是setTimeOut,另一个是setInterval. 下边我 ...

  9. js双层动画幻灯

    js双层动画幻灯 点击下载

随机推荐

  1. android Fragment用法

    Fragment常用的三个类:android.app.Fragment 主要用于定义Fragmentandroid.app.FragmentManager 主要用于在Activity中操作Fragme ...

  2. javaScript 超时与间歇掉用

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. android_handler(一)

    仅仅是一个简单的handler的样例,目的就是对handler有一个初步的接触. 在layout上加入一个button,点击按钮,然后打印出利用handler传送的数据.(都是执行在mainthrea ...

  4. 热烈庆祝国产编程语言R++1.8研发成功

    R++是专为懒人设计的国产编程语言.支持无操作系统裸奔.编译成机器码.android.cocos2dx绑定.中文编程.闭包.惰性求值.JSON.Lisp的S表达式.内联汇编.伪代码.模板.宏.多重继承 ...

  5. android高速开发框架xUtils

    xUtils简单介绍 xUtils 包括了非常多有用的android工具. xUtils 支持大文件上传,更全面的http请求协议支持(10种谓词).拥有更加灵活的ORM,很多其它的事件注解支持且不受 ...

  6. linux安装jmeter

    将jmeter安装包下载下来(部分linux版本),配置环境变量 jmeter下载地址:链接: https://pan.baidu.com/s/1_6-FmU6XjQH71Ngyh2Sx-A    提 ...

  7. Codeforces Round #250 (Div. 2)B. The Child and Set 暴力

    B. The Child and Set   At the children's day, the child came to Picks's house, and messed his house ...

  8. oc69--NSMutableString

    // main.m // NSMutableString基本概念,NSString是不可变字符串,NSMutableString是可变字符串.NSMutableString继承NSString,所以N ...

  9. 把TXT GB2312文件转换成TXT UTF8文件

    /// <summary>        /// 把TXT GB2312文件转换成TXT UTF8文件        /// </summary>        /// < ...

  10. 分类（category）是门学问

    分类的精细程度表现了人类的文明程度. 1. 学科分类 cybernetics:控制论: