前端事件练习之放大镜的实现

首先确认我们需要多少个元素--1、图片，2、遮罩，3、放大后的图片；

然后确认需要几种状态--1、鼠标进入，2、鼠标移动，3、鼠标退出

图片的话，直接一个div，将图片设置为背景图片

<div class="img" style="background-image:url(img/td.jpg)">

script部分，首先我们需要获取/定义3个元素

var img = document.querySelector('.img');
        var zhezhao = null;
        var bigImg = null;

鼠标进入时，遮罩出现，放大图片出现；添加好元素遮罩和放大图，并设置好节点之间的关系

img.addEventListener('mouseenter', function (event) {

			if (!zhezhao) {
				// 遮罩添加类，方便设置样式
				zhezhao = document.createElement('div');
				zhezhao.className = 'zhezhao';
				img.appendChild(zhezhao)
				// 添加元素bigImg,设置类名
				bigImg = document.createElement('div');
				bigImg.className = 'bigImg';
				bigImg.style.backgroundImage = img.style.backgroundImage;
				img.appendChi