這篇文章主要講解了js以及jquery實現手風琴效果的方法，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
創(chuàng)新互聯2013年至今，先為遼陽等服務建站，遼陽等地企業(yè)，進行企業(yè)商務咨詢服務。為遼陽企業(yè)網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。
最近又復習了jQuery的知識，既然jQuery是javascript的一個庫。jQuery能做到的事情javascript也能做到。因此用這兩種方法實現了圖片手風琴效果。
按照慣例，還是上代碼吧，因為代碼里有我的注釋也就相當于解釋了！
先看一下javascript的代碼吧：
div布局：注意哦，里面的圖片我們用js代碼生成
css樣式：
要寫js代碼了。這里封裝了一個完整的運動框架（我個人 覺得哈，你可以繼續(xù)完善，不過你要告訴我，我也學習一下！）
重慶分公司
重慶分公司
/*
* 實現動畫的步驟:
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)
// 當定時器停止后，動畫也就結束了.如果有回調函數就執(zhí)行回調函數
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里面引入我們寫的框架
接下來，寫js代碼
好啦，這樣就完成了，具體效果你自己動手看看吧。完整的下載地址為js版本的手風琴效果
寫完了js，發(fā)現代碼量好多啊，看看jquery代碼，哦買嘎，切記一定要先引入jQuery的包，再寫代碼哈！
看完上述內容，是不是對js以及jquery實現手風琴效果的方法有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯行業(yè)資訊頻道。
