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

2018-06-18 03:43:23来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:让C#轻松实现读写锁分离--封装ReaderWriterLockSlim

下一篇:菜鸟级asp.net 与ms sql server数据库打交道的简单总结