jQuery之图片提示效果
目标：
我们的目标是实现鼠标在图片上移动的时候，可以看到大图展示和超链接自带的提示。
实现具体步骤如下：
- 当鼠标滑入图片超链接，创建一个<div>元素，内容为插入的图片及其title属性的值；
- 将创建的元素追加到文档中；
- 为元素设置x、y坐标，使其显示 在鼠标位置的旁边；
- 当鼠标滑出图片超链接时，移除<div>元素。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接提示图片</title>
<script type="text/javascript" src="jquery-3.3.1.min.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/炊烟.jpg" class="tooltip" title="炊烟"><img class="current" src="../images/炊烟.jpg" width="128px" alt="水天一线" /></a>
<a href="../images/水天一线.jpg" class="tooltip" title="水天一线"><img src="../images/水天一线.jpg" width="128px" alt="水天一线" /></a>
<a href="../images/窗外人生.jpg" class="tooltip" title="窗外人生"><img src="../images/窗外人生.jpg" width="128px" alt="水天一线" /></a>
<a href="../images/路3.jpg" class="tooltip" title="路3"><img src="../images/路3.jpg" width="128px" alt="水天一线" /></a>
<a href="../images/水天一线.jpg" class="tooltip" title="水天一线"><img src="../images/水天一线.jpg" width="128px" alt="水天一线" /></a>
</div>
</body>
<script type="text/javascript">
$(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"
});
});
})
</script>
</html>注意事项：
- 为了防止自带提示的干扰，添加新属性的同时清空原属性；
- 根据鼠标和提示框的位置，给个合适的初值更利于交互；
- 为了提示效果可以随鼠标一起动，添加mousemove事件是非常必要的。
总结：
jQuery确实非常方便好用，简简单单用几个DOM方法就可以实现一个很好的交互效果。毕竟其设计初衷就是write less, do more. 关于其缺点还得在后续的使用中慢慢去对比发现。
