淘寶首頁交互3--商品分類淡入淡出效果
1.html代碼：
<!--導航--> <div class="nav"> <ul> <!-- 1 --> <li class="nav_list"> <p class="nav_title"> <a href="#">女裝</a>/<a href="#">男裝</a>/<a href="#">內衣</a> </p> <!--對應隱藏的分類欄--> <div class="service-float-item" data-index="1" > </div> </li> <li class="nav_list"><!-- 2 --></li> <li class="nav_list"><!-- 3 --></li> <li class="nav_list"><!-- 4 --></li> <li class="nav_list"><!--5 --></li> <li class="nav_list"><!-- 6 --></li> <li class="nav_list"><!-- 7 --></li> <li class="nav_list"><!-- 8 --></li> <li class="nav_list"><!-- 9 --></li> </ul> </div>
2.js代碼：
/*導航欄*/ function side_nav(){ var Nav = document.getElementById(‘nav‘); var navlist = Nav.getElementsByClassName(‘nav_list‘); var hidden_column = Nav.getElementsByClassName(‘service-float-item‘); //鼠標移入，右邊的菜單顯示出來 for(var i=0; i<navlist.length; i++){ navlist[i].index = i; navlist[i].onmouseover = function(){ //淡入效果 startMove(hidden_column[this.index], { opacity:1 }, 100); hidden_column[this.index].style.display = ‘block‘; } navlist[i].onmouseout = function(){ startMove(hidden_column[this.index], { opacity: 0 }, 100); hidden_column[this.index].style.display = ‘none‘; } } }
/*原生js封裝的運動框架*/
//這個緩沖運動是可以調節緩沖的速度的，變量adjust;timerInterval可以設置每次運動的時間間隔 function startMove(obj, json,adjust,timeInterval,fn) { //關閉前一個定時器，解決對同個對象同時調用多個startMove()時，定時器疊加問題。 //使用obj.timer給每個調用startMove()的對象賦予各自的定時器，防止多個對象同時調用startMove()時，同用一個定時器，而導致互相幹擾。 clearInterval(obj.iTimer); var iCur = 0; //創建一個變量，用於存儲 attr屬性每時每刻的值 var iSpeed = 0; obj.iTimer = setInterval(function() { var iBtn = true; // 假設：所有的值都已經到了 for ( var attr in json ) { var iTarget = json[attr]; // 目標點，json數據格式 if (attr == ‘opacity‘) { // *100 會有誤差 0000007 之類的 所以要用 Math.round() 會四舍五入 //針對在FF中opacity屬性值為浮點數值問題，將屬性值 四舍五入、轉換成浮點型。 //乘以100，使opacity屬性值與IE統一為百分數 iCur = Math.round(getStyle( obj, ‘opacity‘ ) * 100); } else { iCur = parseInt(getStyle(obj, attr)); // cur 當前移動的數值 默認值 } //創建 遞減的速度iSpeed變量。實現屬性值的變速改變, 物體運動的速度 數字越小動的越慢 /adjust : 自定義的數字 iSpeed = ( iTarget - iCur ) / adjust; //(目標值‐當前值)/縮放系數=速度 //取整，解決瀏覽器忽略小於1px的數值 導致運動結束時，離目標值Itarget少幾個像素的問題 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 某個值不等於目標點 if (iCur != iTarget) { iBtn = false; if (attr == ‘opacity‘) { // 分別對IE和FF設置opacity屬性值 obj.style.opacity = (iCur + iSpeed) / 100;//for 標準 obj.style.filter = ‘alpha(opacity=‘+ (iCur + iSpeed) +‘)‘;//for IE } else { obj.style[attr] = iCur + iSpeed + ‘px‘; //給指定屬性attr 添加值cur+iSpeed } } } // 都達到了目標點 if (iBtn) { clearInterval(obj.iTimer); fn && fn.call(obj); //只有傳了這個函數才去調用 } },timeInterval); } //getStyle()函數 用於兼容IE和FF：獲取 對象的 非行間樣式中的屬性的值。 obj：元素對象。 attr：屬性名。 // 獲取實際樣式函數 function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr];//for IE } else { return getComputedStyle(obj, false)[attr];//for 標準 } }
註意：
/*
* 在IE中，設置opacity屬性時，元素樣式中需要設置opacity屬性，才能讀取到opacity值。
*
* obj：元素對象。 attr：用引號包圍的屬性名。 iTarget：屬性目標值。
*/
/*
* getComputedStyle是可以把一個元素所有的樣式獲取出來；
*
* 而元素的style只能獲取到元素的style屬性裏面的值，如果元素的樣式是外聯的，就沒辦法獲取了。
*
* currentStyle是ie出的一個產物，作用和getComputedStyle一樣
*
* getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。返回的是一個css樣式聲明對象
*/
緩沖動畫：
逐漸變慢,最後停止
距離越遠速度越大
速度由距離決定
速度=(目標值-當前值)/縮放系數
Bug :速度取整(使用Math方法)，不然會閃
向上取整。Math.ceil(iSpeed)
向下取整。Math.floor(iSpeed)
通過查找發現element.currentStyle(attr)可以獲取計算過之後的屬性。
但是因為兼容性的問題，需封裝getStyle函數。（萬惡的IE）
透明度兼容處理：
判斷attr是不是透明度屬性opacity 。
對於速度進行處理。
為透明度時，由於獲取到的透明度會是小數，所以需要 * 100
並且由於計算機儲存浮點數的問題，還需要將小數，進行四舍五入為整數。使用： Math.round(parseFloat(getStyle(element, attr)) * 100)。
否則，繼續使用默認的速度。
對結果輸出部分進行更改。
判斷是透明度屬性，使用透明度方法
否則，使用使用默認的輸出格式。
淘寶首頁交互3--商品分類淡入淡出效果