原生js-拉勾网首页效果

拉勾网首页公司广告位的悬浮划过效果着实很吸引我。如下(不会做动图!--，感兴趣的可以去拉勾看看):

此处最吸引我的地方在于将鼠标划过上面一排公司列表时，感觉像是绿色的区块跟着你的鼠标移动一样，颇有动感。闲言少续,下面是代码。

css

/*此处简单粗暴的使用了*,此处不是重点^-^*/
*{padding:0;margin:0;}
ul{
    text-align: center;
    margin: 100px auto 0;
    width: 535px;
    font-size: 0;
}
li{
    position:relative;
    display: inline-block;
    width:100px;
    height: 100px;
    overflow: hidden;
    background: rgba(0,0,0,0);
    z-index:10;
    margin: 3px;
}
.bg{
    width:100px;
    height: 100px;
    background: #ccc;
}
p{
    position: absolute;
    top:0;
    left:100%;
    width:90px;
    height: 80px;
    padding:10px 5px;
    font-size:20px;
    line-height: 24px;
    font-weight: bold;
    color:#fff;
    background: rgba(0,179,138,0.9);
    z-index: 1;
}
p em{
    display: inline-block;
    width: 80px;
    border: 3px solid rgba(0, 255, 229, 0.5);
    border-radius: 9999px;
}

html

<ul>
        <li>
            <div class="bg"></div>
            <p>智联招聘<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>百度<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>阿里巴巴<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>爱奇艺<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>腾讯<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>搜狐<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>雅虎<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>Google<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>乐视<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>360<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>迅雷<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>Apple<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>Oracle<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>天猫<em></em></p>
        </li>
        <li>
            <div class="bg"></div>
            <p>去哪儿网<em></em></p>
        </li>
    </ul>

js(关键)

//滑动效果组件
var HoverBox=function(){
    function fun(out,inner){
        this._out=out;
        this._inner=inner;
        this._speed=0.3;
        this._timeout=null;
        this._addEvent();
    }
    fun.prototype={
        constructor:fun,
        _addEvent:function(){
            //0.从上 1.从下 2.从左 3.从右
            var _this=this;
            _this._out.onmouseenter=function(event){
                var pagePos=_this.getPagePos(event);
                var pageX=pagePos.pageX,
                    pageY=pagePos.pageY;
                var arrow=_this.getArrow(_this._out,_this.getPos(_this._out),{top:pageY,left:pageX});
                clearTimeout(_this._timeout);
                switch (arrow){
                    case 0:
                        _this._inner.style.cssText='left:0;top:-100%;';
                        break;
                    case 1:
                        _this._inner.style.cssText='left:0;top:100%;';
                        break;
                    case 2:
                        _this._inner.style.cssText='left:-100%;top:0;';
                        break;
                    case 3:
                        _this._inner.style.cssText='left:100%;top:0;';
                        break;
                }
                _this._timeout=setTimeout(function(){
                    _this._inner.style.cssText='top:0;left:0;transition:all ease '+_this._speed+'s;-webkit-transition:all ease '+_this._speed+'s';
                },50);
            };
            _this._out.onmouseleave=function(event){
                var pagePos=_this.getPagePos(event);
                var pageX=pagePos.pageX,
                    pageY=pagePos.pageY,
                    leftSize= 0,topSize=0;
                var arrow=_this.getArrow(_this._out,_this.getPos(_this._out),{top:pageY,left:pageX});
                clearTimeout(_this._timeout);
                switch (arrow){
                    case 0:
                        leftSize=0;
                        topSize='-100%';
                        break;
                    case 1:
                        leftSize=0;
                        topSize='100%';
                        break;
                    case 2:
                        leftSize='-100%';
                        topSize=0;
                        break;
                    case 3:
                        leftSize='100%';
                        topSize=0;
                        break;
                }
                _this._inner.style.transition=null;
                _this._inner.style.webkitTransition=null;
                _this._timeout=setTimeout(function(){
                    _this._inner.style.cssText='left:'+leftSize+';top:'+topSize+';transition:all ease '+_this._speed+'s;-webkit-transition:all ease '+_this._speed+'s;';
                },50);
            };
        },
        //鼠标坐标
        getPagePos:function(event){
            var event=event||window.event;
            var pageX=event.pageX!=null?event.pageX:(event.clientX+document.documentElement.scrollLeft||document.body.scrollLeft),
                pageY=event.pageY!=null?event.pageY:(event.clientY+document.documentElement.scrollTop||document.body.scrollTop);
            return {
                pageX:pageX,
                pageY:pageY
            }
        },
        //元素偏移量
        getPos:function(element){
            var top= 0,left=0;
            while(element!=null){
                top+=element.offsetTop;
                left+=element.offsetLeft;
                element=element.offsetParent;
            }
            return {
                top:top,
                left:left
            }
        },
        //获取鼠标从哪个方向移入或移出的方块
        getArrow:function(ele,elePos,mousePos){
            //0.向上 1.向下 2.向左 3.向右
            //中心点坐标
            var centerL=elePos.left+ele.offsetWidth/2,
                centerT=elePos.top+ele.offsetHeight/2;
            //偏离中心坐标距离
            var devPosL=mousePos.left-centerL,
                devPosT=mousePos.top-centerT;
            if(devPosT<0 && (Math.abs(devPosT/devPosL)>=1)){
                return 0;
            }else if(devPosT>0 && (Math.abs(devPosT/devPosL)>=1)){
                return 1;
            }else if(devPosL<0 && (Math.abs(devPosT/devPosL)<1)){
                return 2;
            }else if(devPosL>0 && (Math.abs(devPosT/devPosL)<1)){
                return 3;
            }
        }
    };
    return fun;
}();
var lis=document.getElementsByTagName('li'),
    ps=document.getElementsByTagName('p');
//添加相关效果
for(var i=0,len=lis.length;i<len;i++){
    new HoverBox(lis[i],ps[i]);
}

我认为此效果的关键之处在于判断鼠标是从哪个方向移入或移出的小块。我的想法是在小块上添加onmouseenter和mouseleave事件，在事件触发时可以获得鼠标的坐标，再通过获取小块相对于页面的偏移和小块的宽高，就可以计算出在事件触发时鼠标相对于小块中心点的偏移量(top和left)，以此就可以判断出移入或移出的方向了。

　　

本文章为原创文章，代码均为原创手写，转载请注明出处，谢谢。