纯js实现手风琴效果代码

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

我知道现在大多数前端开发人员都在使用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 "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,手风琴

标签：

js,手风琴

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

评论“纯js实现手风琴效果代码”

暂无纯js实现手风琴效果代码的评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2025年01月12日

纯js实现手风琴效果代码

js,手风琴

深入理解Node.js的HTTP模块

JavaScript 继承详解（六）

评论“纯js实现手风琴效果代码”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接