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
        }