這篇文章主要講解了js以及jquery實現手風琴效果的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
最近又復習了jQuery的知識，既然jQuery是javascript的一個庫。jQuery能做到的事情javascript也能做到。因此用這兩種方法實現了圖片手風琴效果。
按照慣例，還是上代碼吧，因為代碼里有我的注釋也就相當于解釋了！
先看一下javascript的代碼吧：
div布局：注意哦，里面的圖片我們用js代碼生成
<div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
css樣式：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
width: 1150px;
height: 400px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
#box ul{
width: 1300px;
}
#box ul li{
width: 240px;
height: 400px;
float: left;
}
</style>要寫js代碼了。這里封裝了一個完整的運動框架（我個人 覺得哈，你可以繼續完善，不過你要告訴我，我也學習一下?。?/p>
/*
* 實現動畫的步驟:
1.怎樣得到當前的樣式 封裝一個函數 getStyle()
2.步長的計算 用(目標位置 - 當前的樣式) / 10
3. 緩動動畫原理: 盒子本身的樣式 + 步長(不斷變化的)
*/
/*
* css設置透明度，一般在ie中用的是filter:alpha(opacity=0);
而在firefox中，一般就是直接使用opacity:0
*/
// 多個屬性的運動框架 以及添加回調函數
function animate(obj,json,fn){ // 目標obj json 屬性：屬性值 fn回調函數
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;// 用來判斷是否停止定時器
// 遍歷json
for (var attr in json) { //attr 屬性 json[attr]值
var curStyle = 0;
if (attr == "opacity") {
curStyle = parseInt(getStyle(obj,attr)*100);
} else{
curStyle = parseInt(getStyle(obj,attr));// 獲得數值
}
// 得到步長 目標位置就是json[attr]
var step = (json[attr]-curStyle) / 10;
step = step > 0 ? Math.ceil(step) :Math.floor(step);
// 判斷透明度
if (attr == "opacity") { // 判斷用戶有沒有輸入opacity
if ("opacity" in obj.style) {
obj.style.opacity = (curStyle + step) / 100;
} else{
obj.style.filter = "alpha(opacity="+(curStyle +step)+")";
}
} else if(attr == "zIndex"){
obj.style.zIndex = json[attr];
} else{
obj.style[attr] = curStyle +step +"px";
}
// 判斷是否已經都到了目標位置 只要其中一個不滿足條件 就不應該停止定時器
if (curStyle != json[attr]) {
flag = false;
}
}
// 判斷定時器條件 是否該停止了
if (flag) {
clearInterval(obj.timer)
// 當定時器停止后，動畫也就結束了.如果有回調函數就執行回調函數
if(fn){
fn();
}
}
},30);
}
// 封裝函數 得到屬性
function getStyle(obj,attr) { // 誰的 那個屬性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回傳遞過來的某個屬性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 瀏覽器
}
}接著我們在js里面引入我們寫的框架
<script src="animate.js"></script>
接下來，寫js代碼
<script>
window.onload = function(){
var box = document.getElementById("box");
var lis = box.children[0].children;
for (var i = 0; i < lis.length;i++) {
lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
lis[i].onmouseover = function(){
for (var j = 0; j < lis.length;j++) {
animate(lis[j],{width:100});
}
animate(this,{width:800});
}
lis[i].onmouseout = function(){
for (var k = 0; k < lis.length;k++) {
animate(lis[k],{width:240});
}
}
}
}
</script>好啦，這樣就完成了，具體效果你自己動手看看吧。完整的下載地址為js版本的手風琴效果
寫完了js，發現代碼量好多啊，看看jquery代碼，哦買嘎，切記一定要先引入jQuery的包，再寫代碼哈！
<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("#box li").each(function(index,ele){
$(ele).css("background","url(images/"+(index+1)+".jpg)");
}).mouseenter(function(){
$(this).stop().animate({width:800},500).siblings("li").stop().animate({width:100},500);
}).mouseleave(function(){
$("#box li").stop().animate({width:240},500);
});
});
</script>看完上述內容，是不是對js以及jquery實現手風琴效果的方法有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
