使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

查看本章节

查看作业目录

需求说明：

使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片

实现思路：

  1. 在 HTML 页面中添加 <img /> 标签，显示小图片
  2. 添加 <img id="big_img" /> 标签，用于显示放大的图片
  3. 在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标悬停事件绑定方法，实在鼠标指针附近显示放大后的图片
  4. 在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标移开事件绑定方法，实现隐藏放大的图片

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var x = 5,y= 15;
				$("#small_img").mousemove(function(e){
					console.log(e);
					$("#big_img").attr("src",this.src);
					$("#big_img").css({
						"top":e.pageY+y+"px",
						"left":e.pageX+x+"px",
						"position":"absolute"});
					$("#big_img").show();
				});
				$("#small_img").mouseout(function(e){
					$("#big_img").hide();
				});
			});
		</script>
	</head>
	<body>
		<img src="img/img_4.jpg" width="100" height="50" id="small_img"/>
		<img id="big_img"/>
	</body>
</html>

 

posted @ 2020-11-12 14:01  明金同学  阅读(63)  评论(0)  编辑  收藏  举报