jquery 鼠标 层

 

        var divoffset = 10;    //显示层离鼠标的距离

        $(document).ready(function(){
                var tooltip = $("#tooltip");//获取显示层

                var toolContent = $("#toolContent");//获取显示内容层

                $('#thumbs > li').bind('mouseover',function(e){//查找a对象，并给对象创建onmouseover事件--这里可以替换成其他的如：div($('div').bind())，ul下的 li $('ul > li').bind()
                    Mouse(e);//计算显示层的位置
                    toolContent.html("<li>显示内容</li>");//显示内容--PS:自己改成动态获取
                    tooltip.css({ top: toppos ,left: leftpos  });//给显示层定义CSS--当前计算出的位置
                    tooltip.stopAll().pause(300).fadeTo(200,1);//显示效果
                }).bind('mousemove',function(e){//给对象创建mousemove事件
                    Mouse(e);//计算显示层的位置
                    tooltip.css({ top: toppos ,left: leftpos  });//给显示层定义CSS--当前计算出的位置--随时改变位置
                }).bind('mouseout',function(){//给对象创建mouseout事件
                    tooltip.stopAll().fadeTo(500,0, function(){$(this).hide();});//隐藏效果
                });
        });

        //计算坐标函数
        var Mouse = function(e){
            mouse = new MouseEvent(e);
            leftpos = mouse.x + divoffset;
            toppos = mouse.y + divoffset;
        }
        //获取鼠标坐标函数
        var MouseEvent = function(e) {
            this.x = e.pageX
            this.y = e.pageY
        }