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

最新推荐文章于 2022-07-13 00:04:13 发布

weixin_33712987

最新推荐文章于 2022-07-13 00:04:13 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ranran/p/jquery_pic_tips.html

本文介绍了一种使用jQuery实现的鼠标悬停显示大图效果的方法。通过简单的HTML结构配合JavaScript和CSS，当鼠标移至小图上时，会在旁边弹出一个包含对应大图的Tooltip窗口，并随着鼠标的移动而移动。

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