純js實(shí)現(xiàn)手風(fēng)琴效果代碼

更新時(shí)間：2021年09月16日 09:39:34 作者：不青春

這篇文章主要為大家詳細(xì)介紹了純js實(shí)現(xiàn)手風(fēng)琴效果代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

我知道現(xiàn)在大多數(shù)前端開(kāi)發(fā)人員都在使用jQuery等第三方的庫(kù)來(lái)進(jìn)行開(kāi)發(fā)，這不僅節(jié)約了時(shí)間，也讓效率大大的提高，并讓公司的效益增加，何樂(lè)而不為呢？

但是，這也會(huì)有一定的缺點(diǎn)，比如jQ比js慢，尤其在大型項(xiàng)目中就會(huì)顯現(xiàn)出來(lái)，下面我用原生js實(shí)現(xiàn)一個(gè)簡(jiǎn)單的手風(fēng)琴效果效果。

HTML代碼如下

結(jié)構(gòu)非常簡(jiǎn)單就5個(gè)li盒子，js代碼會(huì)渲染圖片上去

<!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代碼如下：

寬高請(qǐng)自行設(shè)置，我之前做的這個(gè)項(xiàng)目圖片是1226*446的圖片，所以寬度和高度是按照當(dāng)時(shí)做項(xiàng)目的時(shí)候設(shè)置的，如果你想放置其他尺寸的圖片請(qǐng)按照實(shí)際情況設(shè)施...

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;

}

下面是重頭戲啦，請(qǐng)欣賞原生js（相信很多人都快忘了原生js吧）

//找人
var box = document.getElementById("box");
var ul = box.children[0];
var lis = ul.children;

//循環(huán)遍歷 lis 綁定背景圖

for (var i = 0; i < lis.length; i++) {
 lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";

 //給每一個(gè)li注冊(cè)鼠標(biāo)經(jīng)過(guò)事件 鼠標(biāo)經(jīng)過(guò)后要排他

 lis[i].onmouseover = function () {

  //干掉所有人 讓所有人的寬度 漸漸地 變?yōu)?00

  for (var j = 0; j < lis.length; j++) {
   animate(lis[j], {"width": 100});
  }

  //留下我自己 讓我的寬度 漸漸地 變?yōu)?00

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

//鼠標(biāo)離開(kāi)box 所有的li寬度 漸漸地 變?yōu)?40

box.onmouseout = function () {
 for (var i = 0; i < lis.length; i++) {
  animate(lis[i], {"width": 240});
 }
};

//jQuery中有animate動(dòng)畫函數(shù)，下面是實(shí)現(xiàn)的原理，雖然沒(méi)有jQ的強(qiáng)大，但是基本的效果實(shí)現(xiàn)還是沒(méi)有問(wèn)題的

function animate(obj, json) {
 clearInterval(obj.timer);
 obj.timer = setInterval(function () {

  //先假設(shè) 這一次執(zhí)行完 所有的屬性都到達(dá)目標(biāo)了

  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("代碼還在運(yùn)行");
   if (leader != target) {

    flag = false;//告訴標(biāo)記 當(dāng)前這個(gè)屬性還沒(méi)到達(dá)

   }
  }

  //如果此時(shí)仍然為true 就說(shuō)明真的都到達(dá)了

  if (flag) {
   clearInterval(obj.timer);
  }
 }, 15);
}

//全部屬性都到達(dá)目標(biāo)值才能清空

function getStyle(obj, attr) {
 if (window.getComputedStyle) {
  return window.getComputedStyle(obj, null)[attr];
 } else {
  return obj.currentStyle[attr];
 }
}

上面就是所有的代碼，你可以找五張圖片試一試。

實(shí)際開(kāi)發(fā)中效率還是最重要的，因?yàn)楝F(xiàn)在瀏覽器的性能已經(jīng)非常好了，所以jQ的有些缺點(diǎn)完全可以忽略不計(jì)啦，并且jQ的兼容性真的是不錯(cuò)的，能節(jié)省開(kāi)發(fā)人員很多的時(shí)間和精力，我也很支持在工作項(xiàng)目中用jQ來(lái)開(kāi)發(fā)，可是作為一個(gè)真正的前端技術(shù)人員，你要時(shí)刻了解底層代碼的實(shí)現(xiàn)，這樣隨著科技的發(fā)展，你也不會(huì)落于人后。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: