<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        ul {

            list-style: none

        }

        * {

            margin: 0;

            padding: 0;

        }

        div {

            width: 1150px;

            height: 400px;

            margin: 50px auto;

            border: 1px solid red;

            overflow: hidden;

        }

        div li {

            width: 240px;

            height: 400px;

            float: left;

            /*background-image: url(images/1.jpg);*/

        }

        div ul {

            width: 1300px;

        }

    </style>

</head>

<body>

<div id="box">

    <ul>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

</div>

<script>

    //找人

    var box = document.getElementById("box");

    var ul = box.children[0];

    var lis = ul.children;

    //循环遍历 lis 绑定背景图

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

        lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

        //给每一个li注册鼠标经过事件 鼠标经过后要排他

        lis[i].onmouseover = function () {

            //干掉所有人 让所有人的宽度 渐渐地 变为100

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

                animate(lis[j], {"width": 100});

            }

            //留下我自己 让我的宽度 渐渐地 变为800

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

        };

    }

    //鼠标离开box 所有的li宽度 渐渐地 变为240

    box.onmouseout = function () {

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

            animate(lis[i], {"width": 240});

        }

    };

    function animate(obj, json) {

        clearInterval(obj.timer);

        obj.timer = setInterval(function () {

            //先假设 这一次执行完 所有的属性都到达目标了

            var flag = true;

            for (var k in json) {

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

                var target = json[k];

                var step = (target - leader) / 10;

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

                leader = leader + step;

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

                //if (leader === target) {

                //    clearInterval(obj.timer);

                //}

                console.log("代码还在运行");

                if (leader != target) {

                    flag = false;//告诉标记 当前这个属性还没到达

                }

            }

            //如果此时仍然为true 就说明真的都到达了

            if (flag) {

                clearInterval(obj.timer);

            }

        }, 15);

    }

    //全部属性都到达目标值才能清空

    function getStyle(obj, attr) {

        if (window.getComputedStyle) {

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

        } else {

            return obj.currentStyle[attr];

        }

    }

</script>

</body>

</html>

javascript中手风琴特效的更多相关文章

  1. javascript 实现手风琴特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用 JavaScript 中的 document 对象查找 HTML 元素，实现“登录”按钮的高亮特效 鼠标悬浮于“登录”按钮时，按钮高亮显示；

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象查找 HTML 元素,实现"登录"按钮的高亮特效 鼠标悬浮于"登录" ...

  3. 原生JavaScript中动画与特效的实现原理

    现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...

  4. CSS3和javascript中的transform

    在javascript中,WebkitTransform 大概相当于 transform .transform 为标准,WebkitTransform 适用于Webkit浏览器.js中的WebkitT ...

  5. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  6. JavaScript实战-菜单特效

    以下是我自己用原生JS写的各种菜单特效,虽然网上一搜一大堆,但我还是喜欢自己来写一写! 这是上一篇:JavaScript实战(带收放动画效果的导航菜单) 下面是经过优化后的完整代码,优化了CSS样式. ...

  7. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  8. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  9. 了解javascript中的事件（二）

    本文目录如下: 零.寒暄 一.事件的分类 二.事件代理 2.1 问题引出 2.2 什么是事件代理 2.3 完整示例 二.事件代理 三.事件代理思想的用处 四.总结 零.寒暄 这篇博客本该出现在两个月以 ...

随机推荐

  1. Vs2010无法打开文件“Kernel32.lib”、无法打开“libcpmt.lib”"msvcprt.lib"

    1.对于无法打开"Kernel"问题,即使复制lib文件到目录,仍然会出现最后的错误; 原因:WindowsSdk 安装失败! 方法:重装 microsoft SDK6.0 ,再在 ...

  2. Jmeter报内存溢出解决方案

    描述:wimdows环境,做上传图片接口测试,涉及图片合成和上传,图片采用base64编码.每1s启动200线程的时候,Jmeter报内存溢出错误. 解决方案: 1.修改jmeter.bat: set ...

  3. JS中常见问题

    //s金额 n保留几位小数 默认保留两位小数 s代表金额,n代表保留的小数位数 function formatMoney(s, n) { n = n > 0 && n <= ...

  4. getopt_long 函数

    getopt_long, getopt_long_only -- 命令行解析函数,支持长选项解析   [说明]getopt_long/getopt_long_only是getopt的泛集,getopt ...

  5. 那些年 IE 下踩过的坑

    1年过去了,换了一个不用兼容IE8一下浏览器的工作了! 1.:before,:after(伪类) 所有主流浏览器都支持 :before 选择器. 注释:对于 IE8 及更早版本中的 :before,必 ...

  6. paramiko模块学习笔记

    SSHClient 基于用户名密码连接 import paramiko # 创建SSH对象 ssh = paramiko.SSHClient() # 允许连接不在know_hosts文件中的主机 ss ...

  7. BZOJ 3434 [WC2014]时空穿梭 (莫比乌斯反演)

    题面:BZOJ传送门 洛谷传送门 好难啊..反演的终极题目 首先,本题的突破口在于直线的性质.不论是几维的空间,两点一定能确定一条直线 选取两个点作为最左下和最右上的点! 假设现在是二维空间,选取了$ ...

  8. Centos7 下安装 Docker

    一.简介 Docker是一个开源的应用容器引擎:是一个轻量级容器技术:Docker支持将软件编译成一个镜像:然后在镜像中各种软件做好配置,将镜像发布出去,其他使用者可以直接使用这个镜像:运行中的这个镜 ...

  9. nyoj 20水

    #include<stdio.h> #include<string.h> #define N 110000 struct node { int u,v,next; }bian[ ...

  10. 关于springboot整合的详细过程

    Spring-boot http://tengj.top/2017/04/24/springboot0/