jquery实现：提示文本/图片跟随鼠标移动

最新推荐文章于 2022-05-04 07:30:00 发布

皮蛋瘦肉没有肉

最新推荐文章于 2022-05-04 07:30:00 发布

阅读量926

点赞数

分类专栏： JavaScript 文章标签： html javascript 脚本 jquery 清华大学

本文链接：https://blog.csdn.net/zzp961224/article/details/52176922

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

以清华大学校园图片为例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/layout.css" media="screen" />
		<script src="js/jquery-3.1.0.js"></script>
		<script src="js/showPic.js"></script>
	</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>

css样式代码：

body {
	font-family: "宋体";
}

li {
	float: left;
	list-style: none;
	padding-right: 30px;
}

#tooltip{
	position: absolute;
	border: 1px solid;
}

最关键的jquery代码（请自行引入jquery文件），请注意！

$(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"
			});
	});
})

效果图如下：