代码部分：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Page Title</title>

    <script src="jquery-3.3.1.min.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0

        }

        #tooltip{

            position: absolute;

            /* background: rgba(0, 0, 0, 0); */

        }

        img{

            width: 200px;

            height: 340px;

            margin-left: 10px;

        }

        #imgtip{

            position: absolute;

            /* width: 400px;

            height: 680px; */

        }

    </style>

</head>

<body>

    <a id="link"  href="http://www.baidu.com" title="跳转至百度">出门左转百度</a>

    <br>

    <img src="../img/卡莎.jpeg" title="卡莎">

    <img src="../img/405263107449.jpeg" title="伊芙琳">

    <img src="../img/405263107443.jpeg" title="阿卡丽">

    <img src="../img/405263107437.jpeg" title="阿狸">

    <script>

        $(function(){

            var X = 10;

            var Y = 20;

            $("#link").mouseover(function(e){

                this.myTitle = this.title;//获取原先的title值

                this.title = "";//清空原先的title值

                var tooltip = "<div id='tooltip'>" + this.myTitle + "</div>";//创建新的div 类似于html()方法

                $("body").append(tooltip);//插入新的div到文档中

                $("#tooltip").css({

                        "top": (e.pageY  + Y) + "px",//设置提示的位置，与鼠标位置有关

                        "left": (e.pageX  + X) +"px"

                    }).show("fast"); //show()方法的speed参数规定元素的出现速度

                })//链式操作同样可以用于绑定事件

                .mouseout(function(){

                    this.title = this.myTitle;//鼠标离开后，将title值还原，避免下一次划入时myTitle = ""

                    $("#tooltip").remove();//移除提示

                }).mousemove(function(e){

                    $("#tooltip").css({

                        "top": (e.pageY  + Y) + "px",//使提示的位置随着鼠标位置而变化

                        "left": (e.pageX  + X) +"px"

                    });

                });

            $("img").mouseover(function(e){

                this.myTitle = this.title;

                this.title = "";

                var imgTitle = this.myTitle ? "<br/>" + this.myTitle : "";

                var tooltip = "<div id = 'tooltip'><img src='" + this.src + "'>" + imgTitle + "</div>";

                $("body").append(tooltip);

                $("#tooltip").css({

                    "top": (e.pageY  + Y) + "px",

                    "left": (e.pageX  + X) +"px"

                }).show("fast");

            }).mouseout(function(){

                this.title = this.myTitle;

                $("#tooltip").remove();

            }).mousemove(function(e){

                    $("#tooltip").css({

                        "top": (e.pageY  + Y) + "px",//使提示的位置随着鼠标位置而变化

                        "left": (e.pageX  + X) +"px"

                    });

                });

            })

    </script>

</body>

</html>

事实上仍然有一些纰漏：

为了美观起见，应该把title居中对齐，但是：

在整个tooltip div中设置text-indent/text-align/margin等，或是将文字放在p标签里再设置这些属性都是无效的，暂时不知道应该怎么进行调整，回头来解决这个问题

《锋利的JQuery》中重写超链接与图片提示效果的更多相关文章

  1. PHP判断图片是否存在和jquery中load事件对图片的处理

    在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的web网站时,默认使用的是产品图片的缩略图,查询数据库时获取的是缩略图的路径.但是,不知什么原因,时不时的,测试的 ...

  2. 基于 jQuery 实现的精致作品集图片导航效果

    今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...

  3. 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态

    查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...

  4. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  5. jquery中的uploadfile关于图片上上传的插件的应用

    ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明 ...

  6. 锋利的jQuery中的事件与动画

    奋夜的奋斗  ----  事件与动画 ----  来自地狱的战镰 小小的单词难不倒我们哦!!!!!!!    bind:绑定     unbind:接触绑定    toggle:栓牢   fadeou ...

  7. [锋利JQ]-图片提示效果

    新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...

  8. jQuery中turn.js（翻页效果）学习笔记

    Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...

  9. jquery实现多行文字图片滚动效果

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...

随机推荐

  1. 黄聪：多个wordpress网站（不同域名）共享用户数据的方法

    WordPress可以自定义用户数据表,这样多个wordpress网站就可以共享用户数据了,有时候这是非常方便的,这些Wordpress站点应该安装在同一个数据库下,数据表前缀各不相同.由于Wordp ...

  2. 编译安装MySQL-5.7.13

    编译安装MySQL-5.7 cmake的重要特性之一是其独立于源码(out-of-source)的编译功能,即编译工作可以在另一个指定的目录中而非源码目录中进行,这可以保证源码目录不受任何一次编译的影 ...

  3. 导入数据库时出现ORA-01435: 用户不存在

    报错信息: IMP-00003: 遇到 ORACLE 错误 1435 ORA-01435: 用户不存在 成功终止导入,但出现警告. 我的导入脚本为: imp system/*****@min file ...

  4. python3学习笔记二（注释、缩进）

    注释 单行注释,用#开头即可 多行注释,用''' ''' 或""" """ 缩进 python不能像其他语言一样采用{}或者begin... ...

  5. bzoj4865: [Ynoi2017]由乃运椰子

    在线询问区间众数,传统的分块(记录块间众数和每个权值的出现次数)做法被卡空间(分块用的空间是O(块数*(块数+权值种类数))),因此考虑去掉出现次数较小的数,只用分块维护出现次数较大的数.设K为分界线 ...

  6. R语言学习——根据信息熵建决策树KD3

    R语言代码 决策树的构建 rm(list=ls()) setwd("C:/Users/Administrator/Desktop/R语言与数据挖掘作业/实验3-决策树分类") #s ...

  7. navicat for mysql 最简便的破解方法

    Navicat 破解工具 1.安装Navicat软件 安装成功之后进行破解. 然后选择刚刚安装的Navicat安装路径下找到navicat.exe文件,点击选择即可激活 成功.  (注意此步骤解析的是 ...

  8. [UE4]移除UI（User Widget）并销毁

    1.移除UI,使用“Remove from Parent”方法 2.最后一步给UI变量赋值的时候,如果保持默认选择“Select Assets”,则会把UI变量销毁(赋值为null).

  9. 如果在 Windows 10 家庭版中使用「远程桌面」

    远程桌面是 Windows 系统下原生.跨平台的的远程控制功能,拥有微软官方提供的各平台客户端,就可以让你在远程轻松帮助别人或者控制自己的 PC,而从 Windows 7 以来家庭版都不支持桌面功能

  10. RHEL6安装配置DNS服务

    RHEL6安装配置DNS服务 作者:Eric 微信:loveoracle11g 安装软件包 [root@rac1 ~]# yum -y install bind bind-chroot caching ...