我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发，这不仅节约了时间，也让效率大大的提高，并让公司的效益增加，何乐而不为呢？

但是，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，下面我用原生js实现一个简单的手风琴效果效果。

               HTML代码如下

结构非常简单就5个li盒子，js代码会渲染图片上去

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

          CSS代码如下：


宽高请自行设置，我之前做的这个项目图片是1226*446的图片，所以宽度和高度是按照当时做项目的时候设置的，如果你想放置其他尺寸的图片请按照实际情况设施...
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;

}

下面是重头戏啦，请欣赏原生js（相信很多人都快忘了原生js吧）

//找人
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});
    }
};

//jQuery中有animate动画函数，下面是实现的原理，虽然没有jQ的强大，但是基本的效果实现还是没有问题的

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];
    }
}

上面就是所有的代码，你可以找五张图片试一试。

实际开发中效率还是最重要的，因为现在浏览器的性能已经非常好了，所以jQ的有些缺点完全可以忽略不计啦，并且jQ的兼容性真的是不错的，能节省开发人员很多的时间和精力，我也很支持在工作项目
中用jQ来开发，可是作为一个真正的前端技术人员，你要时刻了解底层代码的实现，这样随着科技的发展，你也不会落于人后。

              希望对你有帮助。

                                  --不青春

纯js代码实现手风琴特效的更多相关文章

  1. 城市连动纯js代码DEMO

    前台代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" co ...

  2. 可重复使用Tab切换代码和纯js代码

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

  3. 纯js和纯css+html制作的手风琴的效果

    一:纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> ...

  4. 纯js实现瀑布流布局及ajax动态新增数据

    本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...

  5. JavaScript--动态添加元素（纯js书写table并删除数据）

    本文是对上一篇博文的扩展,用js书写表格,并添加和删除数据,详细代码解释见代码页. 对于文中使用的script脚本函数,下载地址如下:https://pan.baidu.com/s/13OFnj7nc ...

  6. EazyUI主页框架搭建纯JS样例

    採用Jfinal+EazyUI  执行起来就好能够了 眼下还未增加后台代码  纯JS代码搭建的一个二级菜单+主页 客户换肤, 给使用EazyUI的新人一个高速可用的JS 搭建界面 也给自己保存下 界面 ...

  7. 纯js分页代码(简洁实用)

    纯js写的分页代码. 复制代码代码如下: //每页显示字数 PageSize=5000; //分页模式 flag=2;//1:根据字数自动分页 2:根据[NextPage]分页 //默认页 start ...

  8. 纯JS焦点图特效（可一个页面多用）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

随机推荐

  1. 115个Java面试题和答案——终极列表（下）

    第一篇讨论了面向对象编程和它的特点,关于Java和它的功能的常见问题,Java的集合类,垃圾收集器,本章主要讨论异常处理,Java小应用程序,Swing,JDBC,远程方法调用(RMI),Servle ...

  2. 如何处理 android 方法总数超过 65536 . the number of method references in a .dex file exceed 64k

    一:问题描述:     应用中的Dex 文件方法数超过了最大值65536的上限,简单来说,应用爆棚了. 二.解决方案:      方案1:使用插件化框架  比如: https://github.com ...

  3. 网络热恋之SDWebImage

    SDWebImage-master 是一个非常强大的三方. 当需要应用SDWeb时把文件夹里的SDWebImage文件夹放入工程里. 在需要使用网络获取图片的文件里进入头文件#import " ...

  4. JSON解析方案

    在iOS中,JSON的常见解析方案有4种 第三方框架:JSONKit,SBJson,TouchJSON(性能从左到右,越差) 苹果原生(自带):NSJSONSerialization(性能最好) JS ...

  5. Linux双机信任，适用统一安装

    一.生成建立安全信任关系的证书. 在A机root用户下执行ssh-keygen命令,在需要输入的地方,直接回车, # ssh-keygen -t rsa 注:直接回车就行 二.查看生成密钥的文件 # ...

  6. 使用虚拟信用卡认证openshift铜牌计划

    "铜牌计划(bronze)"是OpenShift推出的一项免费计划,这个计划能为你提供更多的免费便利,主要就是可以自己绑域名加SSL证书和应用即使24小时没人访问也不关机了.说这个 ...

  7. ORA-01501: CREATE DATABASE failed

    使用dbca建库时遇到ORA-01501: CREATE DATABASE failed这个错误,检查告警日志,发现有下面错误信息: SMON: enabling tx recovery Fri Ap ...

  8. 十五天精通WCF——第三天 client如何知道server提供的功能清单

     通常我们去大保健的时候,都会找姑娘问一下这里能提供什么服务,什么价格,这时候可能姑娘会跟你口述一些服务或者提供一份服务清单,这样的话大 家就可以做到童嫂无欺,这样一份活生生的例子,在wcf中同样是一 ...

  9. python-1 python基础知识

    python第一课代码笔记 hello world [root@heartbeat-data- python]# vim hello1.py #!/usr/bin/env python print ( ...

  10. linux面试题

    一．填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取uu要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 ...