鼠标放到图片上图片会有图片提示的两个方法

最新推荐文章于 2021-03-09 16:05:37 发布

eileen823

最新推荐文章于 2021-03-09 16:05:37 发布

阅读量2.1k

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/eileen823/article/details/56690152

版权

web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

法一：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片提示</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
<style type="text/css">
body{
	margin:0;
	padding:40px;
	background:#fff;
	font:80% Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
img{border:none;}
ul,li{
	margin:0;
	padding:0;
}
li{
	list-style:none;
	float:left;
	display:inline;
	margin-right:10px;
	border:1px solid #AAAAAA;
}
.clearfix{
	clear: both;
}
/* tooltip */
#tooltip{
	position:absolute;
	border:1px solid #ccc;
	background:#333;
	padding:2px;
	display:none;
	color:#fff;
}
</style>
<script type="text/javascript">
	$(function(){
		var $img;
		$("a[class='tooltip']").mouseover(function(event){
			$(this).removeAttr("title")
			//获取图片href
			var $href=$(this).attr("href");
			//创建一张图片
		     $img=$("<img id='tooltip'  src='"+$href+"'></img>");
			//3.把图片追加到body
			$("body").append($img);
			//$img.show();
			$img.css({
				"left":event.pageX+5,
				"top":event.pageY+10,
			}).show(500);
		}).mouseout(function(event){
			$img.remove();
		}).mousemove(function(event){
			
		})
	});
</script>

</head>
<body>
<h3>有效果：</h3>
	<ul>
		<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
		<div class="clearfix"></div>
	</ul>


<br/><br/><br/><br/>
<br/><br/><br/><br/>


<h3>无效果：</h3>
<ul>
		<li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li>
		<li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li>
		<li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li>
		<li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li>
	</ul>
</body>
</html>

法二：

<script type="text/javascript">
	$(function(){
		$(".tooltip").mouseover(function(event){
		    var $href=$(this).data("mydata");
		    if($href==null){
			 $(this).data("mydata",$(this).attr("href"));
			$href=$(this).data("mydata");
			$(this).removeAttr("title");
		}
		   var $myimg=$("<img id='tooltip' src='"+$href+"'></img>");
		   $("body").append($myimg);
		   $myimg.css({
		     	"top":event.pageY+15,
			    "left":event.pagex+5
		   }).show(100);
		}).mouseout(function(){
			$("#tooltip").remove();
		}).mousemove(function(){
			$("#tooltip").css({
		     	"top":event.pageY+15,
			    "left":event.pagex+5
		   }).show(100);
		})
	});
</script>

eileen823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标放到图片上图片会有图片提示的两个方法

法一：图片提示 body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%;}img{border:none;}ul,li{ margin:0; padding:0;}li{ list
复制链接

扫一扫