首页 > > 网络编程 > 其它 >

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

2018-06-17 20:10:50来源：未知阅读 ()

一般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="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>