图片悬停显示大图效果

最新推荐文章于 2023-01-27 12:05:49 发布

白日梦想jun

最新推荐文章于 2023-01-27 12:05:49 发布

阅读量593

点赞数

分类专栏： Jquery 文章标签： Jquery 图片悬停大图效果

本文链接：https://blog.csdn.net/oiu1010110/article/details/52810539

版权

Jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片悬停显示大图效果</title>
	<style type="text/css">
		ul,body,img {
			padding:0;
			margin:0;
		}
		li {
			list-style: none;
			display: inline-block;
		}
		ul {
			width: 800px;
			margin: 100px auto;
		}
		ul li {
			margin-right: 50px;
		}
		ul li,ul li img{
			width: 100px;
			height: 100px;
		}
		#my{
			width: 200px;
			height: 200px;
			position: absolute;
		}
	</style>
	<script src="../commonJqery/jquery-3.0.0.js" type="text/javascript"></script>
</head>
<body>
	<ul>
		<li><img src="../img/1.jpg"></li>
		<li><img src="../img/2.jpg"></li>
		<li><img src="../img/3.jpg"></li>
	</ul>
	<script type="text/javascript">
		$(function(){
			var x = 10;
			var y = 50;
			$("li img").mouseover(function (e) {
				// 生成div src=this.src
				var $div = $("<img id='my' src='"+$(this).attr("src")+"'/>");
				$("body").append($div);
				$("#my").css({
					"top": (e.pageY) + x +"px",
					"left": (e.pageX) + y+ "px"
				}).show("fast");
			}).mouseout(function(){
				// 移除div 
				$("#my").remove();
			})
			.mousemove(function(e){
				// div的left与top  page.x
				$("#my").css({
					"top": (e.pageY) + x +"px",
					"left": (e.pageX) + y+ "px"
				});
			})
		});
	</script>
</body>
</html>

白日梦想jun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片悬停显示大图效果

图片悬停显示大图效果 ul,body,img { padding:0; margin:0; } li { list-style: none; display: inline-block; } ul { width: 800px; margin: 100px auto; } ul li { margin-right: 50px
复制链接

扫一扫