jquery实现提示框的效果

先看下效果图

这三个效果是同一个js写出来的，由此可见只要掌握了 我们可以写出格式各样的提示信息，因为css的灵活性，可以让一个熟练掌握css的人将页面玩弄于鼓掌之间，只要开动你的大脑，发挥你的想象力。

效果已定，我们可以梳理一下思路，以往的提示框，其实最简单的我们只要用css就可以写出来，利用a:hover就可以写出来，但是css写出来的效果有一个局限性，形式过于单一，而且考虑到Ie6等浏览器不支持很多高级的css属性，那做起来就更加有局限性了。

js写出来的提示框的优点在于形式多样性，而且会“跟着鼠标一起跑”；

那么实现的思路是

1、为目标元素绑定mouseover和mouseout事件，当移入的时候，动态的在页面的尾部添加一个块级元素，同时通过绝对定位定位到鼠标的某个特定位置

2、利用js动态的获取鼠标指针的坐标位置，然后动态的改变块级元素的top和left值，那么它就会跟着鼠标移动，其实这也是模拟拖拽的一种很好的思路

this.imagePreview = function(){    
    /* CONFIG */
        
        xOffset = 10;
        yOffset = 30;
        
        // these 2 variable determine popup's distance from the cursor
        // you might want to adjust to get the right result
        
    /* END CONFIG */
    $("a.preview").hover(function(e){
        this.t = this.title;
        this.title = "";    
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img src='"+ this.href +"' alt='Image preview' />"+ c +"</p>");                                 
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn("fast");                        
    },
    function(){
        this.title = this.t;    
        $("#preview").remove();
    });    
    $("a.preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });            
};


// starting the script on page load
$(document).ready(function(){
    imagePreview();
});