jQuery经过显示图片大图图片tips效果

89387046

2013-11-25

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

JavaScript Code
<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 Code
<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>  

XML/HTML Code
<div class="thumbnail-item">  
        <a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>  
        <div class="tooltip">  
            <img src="images/big1.jpg" alt="" width="330" height="185" />  
            <span class="overlay"></span>  
        </div>   
    </div>   
                      
    <div class="thumbnail-item">  
        <a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>  
        <div class="tooltip">  
            <img src="images/big2.jpg" alt="" width="330" height="185" />  
            <span class="overlay"></span>  
        </div>   
    </div>   
      
    <div class="thumbnail-item">  
        <a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>  
        <div class="tooltip">  
            <img src="images/big3.jpg" alt="" width="330" height="185" />  
            <span class="overlay"></span>  
        </div>   
    </div>        