查看本章节
查看作业目录
需求说明：
使用 jQuery 操作页面元素的方法，实现浏览大图片的效果，在页面上插入一幅小图片，当鼠标悬停到小图片上时，在小图片的右侧出现与之相对应的大图片
实现思路：
- 在 HTML 页面中添加 <img /> 标签，显示小图片
- 添加 <img id="big_img" /> 标签，用于显示放大的图片
- 在页面加载完毕事件中，获取 id 为 small_img 的 <img/> 标签对象，给图片的鼠标悬停事件绑定方法，实在鼠标指针附近显示放大后的图片
- 在页面加载完毕事件中，获取 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>