jQuery制作图片提示效果

2021-01-26 11:12

阅读：661

YPE html>

标签：也会 image 超链接 ast bar 制作 seo cti 位置

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

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? "
" + this.myTitle : "";            
            var tooltip = "
"+imgTitle+""; 
            //创建 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制作图片提示效果
标签：也会   image   超链接   ast   bar   制作   seo   cti   位置   
原文地址：https://www.cnblogs.com/duan-YF/p/13232156.html