图片跟随鼠标移动

最新推荐文章于 2023-05-26 20:28:49 发布

M_SSY

最新推荐文章于 2023-05-26 20:28:49 发布

阅读量337

点赞数 1

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/M_SSY/article/details/81133248

版权

jQuery 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
body {
	font-family: "宋体";
}
 
li {
	float: left;
	list-style: none;
	padding-right: 30px;
}
 
#tooltip{
	position: absolute;
	border: 1px solid;
}
		</style>
	</head>
 
	<body>
		<ul>
			<li>
				<a href="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view12.jpg" class="tooltip" title="花园">
					<img src="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view12.jpg" width="150px" height="100px" alt="null" />
				</a>
 
			</li>
			<li>
				<a href="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view1.jpg" class="tooltip" title="图书馆">
					<img src="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view1.jpg" width="150px" height="100px" alt="null" />
				</a>
 
			</li>
			<li>
				<a href="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view6.jpg" class="tooltip" title="湖畔">
					<img src="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view6.jpg" width="150px" height="100px" alt="null" />
				</a>
 
			</li>
			<li>
				<a href="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view5.jpg" class="tooltip" title="教学楼">
					<img src="http://www.tsinghua.edu.cn/publish/newthu/newthu_cnt/intothu/picture/view5.jpg" width="150px" height="100px" alt="null" />
				</a>
 
			</li>
 
		</ul>
	</body>
 
</html>

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>

$(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>