标签：也会 image 超链接 ast bar 制作 seo cti 位置
需求说明
鼠标移动到小图上时，跟随鼠标可以显示出对应大图
当鼠标在小图上移动时，大图也会跟随鼠标移动位置
鼠标离开小图时，显示的大图消失
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",
});
});
})
标签：也会 image 超链接 ast bar 制作 seo cti 位置
原文地址：https://www.cnblogs.com/duan-YF/p/13232156.html
