效果图
文件夹结构
HTML/CSS/JS 代码分别保存在 index.html / main.css / main.js 文件中,而main.css / main.js 文件分别保存在 css 和 js 文件夹下;素材图片名为 pic01.jpg 保存在 images 文件夹下。具体情况如下图如示素材
源代码
HTML代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>放大镜效果</title><!--css文件保存在css文件夹下--><link rel="stylesheet" href="css/main.css"></head><body><div><div><!-- 原图 --><!--图片素材保存在images文件夹下--><img src="images/pic01.jpg" alt