《锋利的JQuery》中重写超链接与图片提示效果
代码部分:
<!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》中重写超链接与图片提示效果的更多相关文章
- PHP判断图片是否存在和jquery中load事件对图片的处理
在公司的图片服务器中,同一个产品一般会存在对应的大图和缩略图.因此,我们在开发手机端的web网站时,默认使用的是产品图片的缩略图,查询数据库时获取的是缩略图的路径.但是,不知什么原因,时不时的,测试的 ...
- 基于 jQuery 实现的精致作品集图片导航效果
今天,我们要用 jQuery 来创建一个作品集图像的导航模板.我们的想法是,以分组的方式显示一组作品集,并通过二维的方式(水平/垂直)来浏览.任一箭头或当前图像下方的小盒子可以作为导航使用. 在线演示 ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态。点击列表的项,切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- magento中如何实现产品图片放大效果
Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...
- jquery中的uploadfile关于图片上上传的插件的应用
ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明 ...
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
- [锋利JQ]-图片提示效果
新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...
- jQuery中turn.js(翻页效果)学习笔记
Turn.js是一个内置的jQuery翻页插件1 html中引入<script type="text/javascript" src="js/turn.js&quo ...
- jquery实现多行文字图片滚动效果
今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 复制代码 // 多行滚动(function($){$.fn.extend({Scroll:function ...
随机推荐
- Microsoft Office 2016 简体中文 Vol 版镜像下载
在使用上,零售版和批量授权版并没有区别,只是授权方式方面的区别,相对而言,VOL 版的更容易激活一些,其他并没有什么区别了. 有需要的可以在下面下载:(以下均是 VL 版) 版本:Office 201 ...
- [转][MVC4]
<add key="vs:EnableBrowserLink" value="false"/> 把这个加到 <appSettings /> ...
- 廖雪峰Java2面向对象编程-6Java核心类-5枚举类
直接定义常量 public class Weekday { //定义int常量 public static final int SUN = 0; public static final int MON ...
- Linux下静态库和动态库
函数库分为静态库和动态库 动态库(格式为libname.so[.主版本号.次版本号.发行号]).在程序编译时并不会被链接到目标代码中,而是在程序运行时才被载入. 静态库是目标文件.a的归档文件(格式为 ...
- ZBench: 服务器一键测试脚本 / 自带结果导出vps网络测试
zbench主站: https://blog.liyuans.com/archives/Zbench.html 脚本来自友链 主机博客,项目地址为 https://github.com/Functio ...
- python基础介绍
一. 1.计算机基础 cpu:运算和控制:速度:飞机 内存:临时存储,供给cup数据,断电数据清空.成本高,速度:高铁 硬盘:相当于电脑的数据库,存储大量数据,数据永久保存(除非物理结构被破坏).速度 ...
- 2017湖湘杯复赛writeup
2017湖湘杯复赛writeup 队伍名:China H.L.B 队伍同时在打 X-NUCA 和 湖湘杯的比赛,再加上周末周末周末啊,陪女朋友逛街吃饭看电影啊.所以精力有点分散,做出来部分题目,现在 ...
- IDEA远程调试
问题: 通常在java打成可运行的Jar项目时,运行jar时调试很不方便,特别是要在linux上面执行jar包的情况.此时需要将这个项目打成Jar包(如果是maven项目,直接使用pa ...
- JIT和AOT编译详解
JIT和AOT编译介绍 JIT - Just-In-Time 实时编译,即时编译 通常所说的JIT的优势是Profile-Based Optimization,也就是边跑边优化 ...
- 高通9X07模块QMI架构使用入门
QMI(Qualcomm Message Interface) 高通用来替代OneRPC/DM的协议,用来与modem通信.本文是摸索高通QMI机制一点经验,重点解读了如果建立拨号连接,仅供参考.qm ...