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

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

演示

 

JavaScript Code

1. <script type="text/javascript">  
2.   
3.     // Load this script once the document is ready  
4.     $(document).ready(function () {  
5.           
6.         // Get all the thumbnail  
7.         $('div.thumbnail-item').mouseenter(function(e) {  
8.   
9.             // Calculate the position of the image tooltip  
10.             x = e.pageX - $(this).offset().left;  
11.             y = e.pageY - $(this).offset().top;  
12.   
13.             // Set the z-index of the current item,   
14.             // make sure it's greater than the rest of thumbnail items  
15.             // Set the position and display the image tooltip  
16.             $(this).css('z-index','15') 
17.             .children("div.tooltip") 
18.             .css({'top': y + 10,'left': x + 20,'display':'block'}); 
19.              
20.         }).mousemove(function(e) { 
21.              
22.             // Calculate the position of the image tooltip           
23.             x = e.pageX - $(this).offset().left; 
24.             y = e.pageY - $(this).offset().top; 
25.              
26.             // This line causes the tooltip will follow the mouse pointer 
27.             $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20}); 
28.              
29.         }).mouseleave(function() { 
30.              
31.             // Reset the z-index and hide the image tooltip  
32.             $(this).css('z-index','1')  
33.             .children("div.tooltip")  
34.             .animate({"opacity": "hide"}, "fast");  
35.         });  
36.   
37.     });  
38.   
39.   
40.     </script>  

 

CSS Code

1. <style>  
2.   
3. .thumbnail-item {   
4.     /* position relative so that we can use position absolute for the tooltip */  
5.     position: relative;   
6.     float: left;    
7.     margin: 0px 5px;   
8. }  
9.   
10. .thumbnail-item a {   
11.     display: block;   
12. }  
13.   
14. .thumbnail-item img.thumbnail {  
15.     border:3px solid #ccc;    
16. }  
17.           
18. .tooltip {   
19.     /* by default, hide it */  
20.     display: none;   
21.     /* allow us to move the tooltip */  
22.     position: absolute;   
23.     /* align the image properly */  
24.     padding: 8px 0 0 8px;   
25. }  
26.   
27.     .tooltip span.overlay {   
28.         /* the png image, need ie6 hack though */  
29.         background: url(images/overlay.png) no-repeat;   
30.         /* put this overlay on the top of the tooltip image */  
31.         position: absolute;   
32.         top: 0px;   
33.         left: 0px;   
34.         display: block;   
35.         width: 350px;   
36.         height: 200px;  
37.     }  
38.     </style>  

 

XML/HTML Code

1. <div class="thumbnail-item">  
2.         <a href="#"><img src="images/small1.jpg" class="thumbnail"/></a>  
3.         <div class="tooltip">  
4.             <img src="images/big1.jpg" alt="" width="330" height="185" />  
5.             <span class="overlay"></span>  
6.         </div>   
7.     </div>   
8.                       
9.     <div class="thumbnail-item">  
10.         <a href="#"><img src="images/small2.jpg" class="thumbnail"/></a>  
11.         <div class="tooltip">  
12.             <img src="images/big2.jpg" alt="" width="330" height="185" />  
13.             <span class="overlay"></span>  
14.         </div>   
15.     </div>   
16.       
17.     <div class="thumbnail-item">  
18.         <a href="#"><img src="images/small3.jpg" class="thumbnail"/></a>  
19.         <div class="tooltip">  
20.             <img src="images/big3.jpg" alt="" width="330" height="185" />  
21.             <span class="overlay"></span>  
22.         </div>   
23.     </div>        

 

原文地址:http://www.freejs.net/article_jquerytupiantexiao_97.html