主页 / 网络编程 /

纯js实现手风琴效果代码

网络编程 2021-07-04 20:00www.168986.cn编程入门
这篇文章主要为大家详细介绍了纯js实现手风琴效果代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

，这也会有一定的缺点，比如jQ比js慢，尤其在大型项目中就会显现出来，狼蚁网站SEO优化我用原生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代码如下

宽高请自行设置，我之前做的这个项目图片是1226446的图片，所以宽度和高度是按照当时做项目的时候设置的，如果你想放置其他尺寸的图片请按照实际情况设施...

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;

}

狼蚁网站SEO优化是重头戏啦，请欣赏原生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动画函数，狼蚁网站SEO优化是实现的原理，虽然没有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);
   /
上一篇：深入理解Node.js的HTTP模块 下一篇：JavaScript 继承详解（六）

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by