純js程式碼實現手風琴特效-js教程-PHP中文網

首頁

web前端

js教程

純js程式碼實現手風琴特效

高洛峰

Oct 12, 2016 am 09:29 AM

我知道現在大多數前端開發人員都在使用jQuery等第三方的函式庫來進行開發，這不僅節省了時間，也讓效率大大的提高，並讓公司的效益增加，何樂而不為呢？

但是，這也會有一定的缺點，例如jQ比js慢，尤其在大型專案中就會顯現出來，下面我用原生js實現一個簡單的手風琴效果效果。

HTML程式碼如下

結構非常簡單就5個li盒子，js程式碼會渲染圖片上去

<!DOCTYPE html>
<html>
<head>
    <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[i].style.backgroundImage = "url(images/" + (i + 1) + ". jpg)";

//給每個li註冊滑鼠經過事件滑鼠經過後要排他

lis[i].onmouseover = function () {

100

for (var j = 0; j animate(lis[j], {"width": 100} )   //留下我自己讓我的寬度漸漸地變成800

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

//滑鼠離開片上 function {
for (var i = 0; i animate(lis[i], {"width": 240});
}
}; ，以下是實現的原理，雖然沒有jQ的強大，但是基本的效果實現還是沒有問題的

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

//先假設這次執行完所有的屬性都到達目標了

var flag = true;
le(obj, k)) || 0 ;
var target = json[k];
var step = (target - leader) / 10
;
leader = leader + step;
obj.style[k] = leader + "px";
//if (leader === target //}
console.log("程式碼仍在運作");
if (leader != target) {

flag = f   }

//如果此時仍為true 就表示真的都到達了

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

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

上面就是所有的程式碼，可以找五張圖片試試看。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles