首页>>Jquery图片>>jQuery经过显示图片大图 图片tips效果(2013-11-03)

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

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

jQuery经过显示图片大图 图片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