jQuery鼠标悬停方向感知

一款jQuery鼠标悬停方向感知的特效，鼠标在任意的方块内移动时，自动感知鼠标的方向并出现一个黑色的矩形沿着鼠标对应的放滑入，鼠标离开矩形时黑色的矩形则滑出，可以感知鼠标移动的任意方向。

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，简单设置页面样式，并引入jQuery库，代码如下：

<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>

接着设置好鼠标悬停的事件响应，给感知的黑色方块定义一下属性样式等，部分代码如下：

$.fn.wear=function(options){
        //判断参数是否合法
        if(!isValid(options)){
            alert('参数不合法，请重新设置!');
            return this;
        }
        var opts = $.extend({},defaults,options)//覆盖默认参数
        , Num = opts.colNum*opts.rowNum, Tag = opts.tag, Sty = opts.style,tagSty = opts.tagStyle,boxWidth = this.width(),boxHeight=this.height();
        //返回对象 链式操作
        return this.each(function(index,ele){
            var _this = $(this);
            for(var i=0;i<Num;i++){
                var obj = $(Tag);//定义内部块标签
                
                //自定义标签内容
                var makeup = obj.html();
                makeup = $.fn.wear.format(makeup);
                Sty.border=Sty.border||'1px solid #fff';
                var borderW = Sty.border.match(/\d+px/g)[0].match(/\d+/g)[0];
                
                obj.html(makeup).css({
                    'border':Sty.border,
                    'width':boxWidth/opts.colNum-2*Sty.margin-2*Sty.padding-2*borderW,
                    'height':boxHeight/opts.rowNum-2*Sty.margin-2*Sty.padding-2*borderW,
                    'background':Sty.background,
                    'overflow':'hidden',
                    'float':'left',
                    'position':'relative',
                    'margin':Sty.margin,
                    'padding':Sty.padding,
                    'opacity':Sty.opacity,
                    'border-radius':Sty.radius
                });
                
                var mask_tag = $('<i>');//定义穿墙层
                mask_tag.addClass('mask');
                var makeup2 = mask_tag.html();
                makeup2 = $.fn.wear.formatMask(makeup2);
                mask_tag.html(makeup2).css({
                    'font-style':'normal',
                    'width':obj.outerWidth(),
                    'height':obj.outerHeight(),
                    'background':tagSty.background,
                    'position':'absolute',
                    'left':-borderW-obj.outerWidth(),
                    'top':-borderW,
                    'opacity':tagSty.opacity,
                    'border-radius':Sty.radius
                });
                obj.append(mask_tag);
                _this.append(obj);

            }
            _this.children().each(function(){
                __this = $(this);
                hoverGo(__this.get(0),{w:obj.outerWidth(),h:obj.outerHeight(),time:opts.time});
            })
        });
    };
    //设置默认参数
    var defaults={
        style:{
            margin:0,
            padding:0,
            border:'',
            radius:0,
            opacity:1,
            background:'#ccc'
        },
        colNum:4,
        rowNum:4,
        tag:'<div>',
        tagStyle:{
            
            opacity:0.6,
            background:'#000'
        },
        time:700
    };
    //公共的格式化方法
    $.fn.wear.format = function(str){
        return str;
    }
    $.fn.wear.formatMask = function(str){
        return str;
    }
    //公共方法
    function isValid(options){
        return !options||(options&&typeof options ==='object')?true:false;
    }

页面的body部分，设置一个div容器用来展示效果，代码如下：

<div id="wear" style="width:600px;height:600px;margin:0px auto;"></div>