纯js实现手风琴效果代码

我知道现在大多数前端开发人员都在使用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来开发，可是作为一个真正的前端技术人员，你要时刻了解底层代码的实现，这样随着科技的发展，你也不会落于人后。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • js实现简单的手风琴效果

    js实现简单的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开效果 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0;padding:0;font-size:12px;list-s

  • 原生js做的手风琴效果的导航菜单

    原生js做的手风琴效果的导航菜单

    做好的手风琴效果如下,具体看代码:  html代码 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Accordion</title> <style> #accordion{ width:200px; } #accordion ul{ list-style: none; display:none; } .fir

  • js实现带三角符的手风琴效果

    js实现带三角符的手风琴效果

    效果图: 图(1)初始图 图(2)点击展开图 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } #list{ width: 240px; border: 1px solid #666;

  • Angular.js与Bootstrap相结合实现手风琴菜单代码

    Angular.js与Bootstrap相结合实现手风琴菜单代码

    标题定的是angularjs与bootstrap相结合实现手风琴菜单,其实也就是用的bootstrap的样式. 在上篇文章给大家介绍了Angular.js与Bootstrap相结合实现表格分页代码.接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先上效果图: <my-page ng-repeat="item in expanders" page-title="item.title">{{item.text}}</my-page

  • javascript手风琴下拉菜单实现代码

    javascript手风琴下拉菜单实现代码

    手风琴下拉菜单实现的效果更灵活,不同与传统的下拉菜单,本文就为大家分享一段javascript手风琴下拉菜单实现代码,先看一看效果图: 具体的javascript手风琴下拉菜单代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手风琴下拉菜单效果</title> <script src="js/jquery-1.11.1.j

  • 原生JS实现垂直手风琴效果

    原生JS实现垂直手风琴效果

    效果如下: 图 (1) 展开前 图 (2) 展开后 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> *{ margin: 0; padding: 0; } .panel { width: 555px; height: auto; background-color: #333333; margin: 50

  • js实现可折叠展开的手风琴菜单效果

    js实现可折叠展开的手风琴菜单效果

    本文实例讲述了js实现可折叠展开的手风琴菜单效果.分享给大家供大家参考.具体如下: 这是一款可折叠展开的菜单,手风琴菜单,运用CSS与JavaScript技术实现的合拢与伸展的网页菜单,代码简洁,来自老外的代码作品,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hidden-show-sfq-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • 纯js+html和纯css+html制作手风琴效果

    本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis

  • 原生js实现手风琴功能（支持横纵向调用）

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴-支持横纵向调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type=&q

随机推荐