jQuery学习20---鼠标移动时图片跟着移动，还有提示层的显示

最新推荐文章于 2022-08-25 18:41:00 发布

onyas

最新推荐文章于 2022-08-25 18:41:00 发布

阅读量5.1k

点赞数 1

分类专栏： jQuery 文章标签：鼠标移动时图片跟着移动还有提示层的显示

本文链接：https://blog.csdn.net/zheng0518/article/details/9207637

版权

jQuery 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
			#tooltips
			{
				width:200px;
				height:200px;
				border:solid 1px red;
				position:absolute;
			}
		</style>
		<script type="text/javascript">

			$(function()
			{
				//图片跟着鼠标移动的效果
				/*
				$(document).mousemove(function(e)
				{
					$("#img01").css({"position":"absolute","left":e.pageX,"top":e.pageY});
				});
				*/
				//鼠标在上面或离开时的提示层，这两个效果不能同时显示
				$("a").hover(function(e)
				{
					var $div = $("<div id='tooltips'>详细信息</div>");
					$div.css({"left":e.pageX,"top":e.pageY});
					
					$("body").append($div);
				},function()
				{
					var $div = $("#tooltips");
					if($div)
					{
						$div.remove();
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="d1"></div>
		<img id="img01" src="shubiao.gif" width="40px" height="50px"/>
		<a href="http:www.baidu.com">baidu</a><br/><br/><br/><br/>
		<a href="http:www.baidu.com">baidu</a><br/><br/><br/><br/>
		<a href="http:www.baidu.com">baidu</a><br/><br/><br/><br/>
		<a href="http:www.baidu.com">baidu</a><br/><br/><br/><br/>
	</body>
</html>