淘宝首页交互3--商品分类淡入淡出效果

Posted 2020-10-05

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)。
否则，继续使用默认的速度。
对结果输出部分进行更改。
判断是透明度属性，使用透明度方法
否则，使用使用默认的输出格式。