jQuery制作图片提示效果

Posted 2020-12-14 duan-yf

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery制作图片提示效果相关的知识，希望对你有一定的参考价值。

需求说明
鼠标移动到小图上时，跟随鼠标可以显示出对应大图
当鼠标在小图上移动时，大图也会跟随鼠标移动位置
鼠标离开小图时，显示的大图消失

html

<!DOCTYPE html>
<html lang="en">
    <head>    
    <meta charset="UTF-8">    
    <title>超链接提示图片</title>    
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>    
    <style>        
    #tooltip{            
        position:absolute;            
        border:1px solid #ccc;            
        background:#333;            
        padding:2px;            
        display:none;            
        color:#fff;        
        }    
    </style>
    </head>
    <body>
        <h3 class="title">超链接提示图片</h3>
        <div class="small">    
        <a href="images/1.jpg" class="tooltip" title="手机"><img class="current" src="images/1_bigger.jpg" width="128px" alt="胡歌" /></a>    
        <a href="images/2.jpg" class="tooltip" title="手机"><img src="images/2_bigger.jpg" width="128px" alt="胡歌" /></a>    
        <a href="images/3.jpg" class="tooltip" title="手机"><img src="images/3_bigger.jpg" width="128px" alt="胡歌" /></a>    
        </div> 
    </body>
    <script src="js/lianxi.js"></script>
        <script src="js/jquery-1.12.4.js"></script>
    </html>

js（jquery-1.12.4.js）

$(function(){        
        var x = 10;        
        var y = 20;        
        $("a.tooltip").mouseover(function(e){            
            this.myTitle = this.title;            
            this.title = "";            
            var imgTitle = this.myTitle? "<br/>" + this.myTitle : "";            
            var tooltip = "<div id=‘tooltip‘><img src=‘"+ this.href +"‘ alt=‘‘/>"+imgTitle+"</div>"; 
            //创建 div 元素            
            $("body").append(tooltip); 
            //把它追加到文档中            
            $("#tooltip").css({"top": (e.pageY+y) + "px","left":  (e.pageX+x)  + "px"}).show("fast");     //设置x坐标和y坐标，并且显示       
            }).mouseout(function(){            
                this.title = this.myTitle;            
                $("#tooltip").remove();     //移除        
                }).mousemove(function(e){            
                    $("#tooltip").css({"top": (e.pageY+y) + "px","left":  (e.pageX+x)  + "px",
                    });       
                });   
        })

以上是关于jQuery制作图片提示效果的主要内容，如果未能解决你的问题，请参考以下文章

开发中经常用到的特效效果

html+css+js(+JQuery)制作扑克牌图片切换效果