JS插件分享：sHover 感应鼠标进入方向图片展示

sHover是一个简单的原生JavaScript插件，它可以让你的展示图片感应鼠标进入方向，从而让悬浮层做出不同的运动效果！它的使用和设置都非常方便，测试了一下他基本可以支持所有浏览器，所以就不用担心浏览器兼容问题啦。

演示dome：sHover 感应鼠标进入方向图片展示

使用简单
sHover是一个纯原生JavaScript编写的小组件，不需要引入JQuery或其他插件就可以使用。使用非常简单，引入sHover的js文件之后，只需一行代码就可以搞定。
代码如下：

var example1=new sHover("example1","intro1");   

html:

<div class="example1">
    <h1>example1</h1>
    <span class="intro1">
        <h2>intro1</h2>
    </span>
</div>

多样设置
除此之外，它还可以设置包括滑动速度、透明度、淡入淡出等多种样式。
设置方法如下：

example1.set({
    speed:7,/*悬浮层滑入滑出的速度，默认值为5，取值范围0-10*/
    opacity:80, /*设置悬浮层的最终透明度，默认值为100，取值范围0-100*/                   
    opacityChange:true/*淡入淡出效果，默认值为false*/      
});

超强兼容
它的在所有新版本的浏览器上都能完美运行，除此之外，它甚至能在IE5及以前的浏览器上运行，并且效果几乎没有影响

下面简单介绍一下该样式是如何通过js实现的：
首先主要用到的是onmouseover、onmouseout这两个事件：

//绑定事件
function eventRegister(item,intro){
    _this.myAddEvent(item,'mouseover',function(ev){
        _this.hoverIn(ev,item,intro);
    });
    _this.myAddEvent(sItemArr[i],'mouseout',function(ev){
        _this.hoverOut(ev,item,intro);
    });
}

当鼠标刚移入瞬间，获取鼠标相对容器的位置，从而设置浮动层的初始位置：

sHover.prototype.getDir=function(e,item){
        var e=e||event;
        var w = this.getStyle(item,'width'),
            h = this.getStyle(item,'height'),
            x = ( e.clientX - this.getPos(item).left+this.getScroll().left - ( w / 2 ) ) * ( w > h ? ( h / w ) : 1 ),
            y = (e.clientY - this.getPos(item).top+this.getScroll().top - (h / 2)) * (h > w ? (w / h) : 1),
        direction = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90) + 3 ) % 4,
        eventType = e.type;
        return direction;
    }

通过鼠标位置设置浮动层的初始位置：

sHover.prototype.hoverIn=function(ev,item,intro){
        var e=ev||event;
        if(this.trigger(item,'in',e)){
            var dir=this.getDir(e,item);
            if(dir==0||dir==2){
                if(dir==0){//鼠标从上面进入
                    intro.style.top=-item.size.height+'px';
                }else{//鼠标从下面进入
                    intro.style.top=item.size.height+'px';
                }
                intro.style.left='0px';
                this.startMove(intro,{'top':0,'left':0,'opacity':this.opacity});//添加移动效果
            }else{
                if(dir==1){//鼠标从右边进入
                    intro.style.left=item.size.width+'px';
                }else{//鼠标从左边进入
                    intro.style.left=-item.size.width+'px';
                }
                intro.style.top='0px';
                this.startMove(intro,{'left':0,'opacity':this.opacity});
            }
        }   
    }

设置好初始位置后就到了添加移动效果了，移入时默认top和left都为0，这样就刚好能覆盖容器：

sHover.prototype.startMove=function(obj,json,fn){
        var nowAttr;
        var speed;
        var k=(11-this.slideSpeed)>0?(11-this.slideSpeed):1;
        var delay=30;
        var _this=this;
        clearInterval(obj.moveTimer);
        obj.moveTimer=setInterval(function(){
            var stop=true;
            for(var attr in json){
                var gotStyle=_this.getStyle(obj,attr);
                var target=json[attr];
                if(attr=="opacity"){
                    nowAttr=parseInt(parseFloat(gotStyle)*100, 10);
                }else{
                    nowAttr=parseInt(gotStyle, 10);
                }

                if(nowAttr!=target){
                    stop=false;
                }

                if(stop){
                    clearInterval(obj.moveTimer);
                    fn&&fn(); 
                }else{
                    speed=(target-nowAttr)/k;
                    speed=target>nowAttr?Math.ceil(speed):Math.floor(speed);

                    if(attr=="opacity"){
                        obj.style[attr]=(nowAttr+speed)/100;
                        obj.style.filter='alpha(opacity='+(nowAttr+speed)+')';
                    }else{
                        obj.style[attr]=(nowAttr+speed)+"px";
                    }
                }
            }   
        }, delay);
    }

当鼠标移出时同理，调用getDir()获取鼠标移出相对容器的位置，从而设置浮动层移出位置。

sHover.prototype.hoverOut=function(ev,item,intro){
        var e=ev||event;
        var opacity=100;
        if(this.trigger(item,'out',e)){
            var dir=this.getDir(e,item);
            if(this.opacityChange){opacity=0;}
            switch(dir){
                case 0:
                    this.startMove(intro,{'top':-item.size.height,'left':0,'opacity':opacity});
                    break;
                case 2:
                    this.startMove(intro,{'top':item.size.height,'left':0,'opacity':opacity});
                    break;
                case 1:
                    this.startMove(intro,{'left':item.size.width,'top':0,'opacity':opacity});
                    break;
                case 3:
                    this.startMove(intro,{'left':-item.size.width,'top':0,'opacity':opacity});
                    break;
            }
        }   
    }