jQuery制作鼠标经过显示图片大图，生成图片tips效果

一般tips都是文字，这个可以支持图片，很漂亮：

演示

 

<script type="text/javascript">   

    // Load this script once the document is ready
    $(document).ready(function () {   

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {   

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;   

            // Set the z-index of the current item,
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});  

        }).mousemove(function(e) {  

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;  

            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});  

        }).mouseleave(function() {  

            // Reset the z-index and hide the image tooltip
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });   

    });   

    </script>   

CSS文件如下：

<style>   

.thumbnail-item {
    /* position relative so that we can use position absolute for the tooltip */
    position: relative;
    float: left;
    margin: 0px 5px;
}   

.thumbnail-item a {
    display: block;
}   

.thumbnail-item img.thumbnail {
    border:3px solid #ccc;
}   

.tooltip {
    /* by default, hide it */
    display: none;
    /* allow us to move the tooltip */
    position: absolute;
    /* align the image properly */
    padding: 8px 0 0 8px;
}   

    .tooltip span.overlay {
        /* the png image, need ie6 hack though */
        background: url(images/overlay.png) no-repeat;
        /* put this overlay on the top of the tooltip image */
        position: absolute;
        top: 0px;
        left: 0px;
        display: block;
        width: 350px;
        height: 200px;
    }
    </style>   

HTML代码：

<div class="thumbnail-item">
        <a href="#"><img src="data:images/small1.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="data:images/big1.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </div>
    </div>    

    <div class="thumbnail-item">
        <a href="#"><img src="data:images/small2.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="data:images/big2.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </div>
    </div>    

    <div class="thumbnail-item">
        <a href="#"><img src="data:images/small3.jpg" class="thumbnail"/></a>
        <div class="tooltip">
            <img src="data:images/big3.jpg" alt="" width="330" height="185" />
            <span class="overlay"></span>
        </div>
    </div>