jquery5

这里是简单的js放大镜功能的实现

主要使用了三种鼠标事件类型进行操作(mouseenter,mousemove,mouseleave)

实际原理是利用原始图片盒子中的放大镜进行位移,让放大的图片在右边的盒子进行相反方向的等比例位移,以此达到放大商品的效果

先写好html,代码如下:

html代码很简单,就是一个大的容器(section)中有两个小容器(leftBox,rightBox),左侧容器为原图,右侧为放大后的图片(感觉像是障眼法),html写好后准备写css样式

css样式如下:

.box {

height: 600px;

width: 1000px;

margin: 50px auto;

overflow: hidden;

}

.leftBox,

.rightBox {

height: 450px;

width: 450px;

float: left;

position: relative;

}

.rightBox {

height: 550px;

width: 550px;

display:none;

overflow: hidden;

}

.smallBox {

position: absolute;

height: 150px;

width: 150px;

 

top: 0;

left: 0;

cursor: move;

border-radius: 50%;

}

.rightBox>img {

position: absolute;

width: 1650px;

height: 1650px;

}

我们先把大的容器宽高固定好,防止高度塌陷.

这里我们的左边原始图片的容器和右边放大图片的容器需要自己提前设置好,我这里设置了左边容器宽高为450px,右边的容器稍大一点为550px.对两个盒子进行浮动让其显示在一行.

在这里事先设置好原始图片中的放大镜的样式,宽高设置为150px,相对父元素绝对定位

上面设置好放大镜的宽高为原始图片的1/3,所以放大的图片也需要设置为右边容器3倍

样式设置完毕后,下面开始js部分

js代码如下:

先附上完整的,后面再一一解析:

var leftBox, smallBox, rightBox, img;

init();

function init() {

leftBox = document.querySelector('.leftBox');

rightBox = document.querySelector('.rightBox');

img = rightBox.querySelector('img');

leftBox.addEventListener('mouseenter', mouseHandler);

}

function mouseHandler(e) {

if (e.type === 'mouseenter') {

rightBox.style.display = 'block';

smallBox = document.createElement('div');

smallBox.className = 'smallBox';

this.appendChild(smallBox);

this.addEventListener('mousemove', mouseHandler);

this.addEventListener('mouseleave', mouseHandler);

} else if (e.type === 'mousemove') {

var curL = e.pageX - e.currentTarget.offsetLeft - smallBox.offsetWidth / 2,

curT = e.pageY - e.currentTarget.offsetTop - smallBox.offsetHeight / 2;

var minL = 0,

minT = 0,

maxL = e.currentTarget.offsetWidth - smallBox.offsetWidth,

maxT = e.currentTarget.offsetHeight - smallBox.offsetHeight;

curL = curL < minL ? minL : (curL > maxL ? maxL : curL);

curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

smallBox.style.left = curL + 'px';

smallBox.style.top = curT + 'px';

img.style.left = -curL * 4 + 'px';

img.style.top = -curT * 4 + 'px';

} else if (e.type === 'mouseleave') {

rightBox.style.visibility = 'none';

this.removeChild(smallBox);

smallBox = null;

this.removeEventListener('mousemove', mouseHandler);

this.removeEventListener('mouseleave', mouseHandler);

}

}

第一步,先初始化需要的操作的元素的变量,我们这里需要操作四个元素,分别为左边的原始图片盒子,右边的放大图片盒子,放大镜的盒子,以及要操作的放大图片

第二步,初始化函数(一开始需要对哪些元素进行操作),依次利用querySelector获取的需操作的元素的选择器名,再对左边原始图片盒子增加一个事件监听器,事件类型为鼠标事件中的mouseenter,事件处理程序的回调函数为mouseHandler

这里选择mouseenter和mouseover是存在很大区别的:

+1.mouseenter在进入父容器中的子元素时,不会触发冒泡传播机制(子元素也是在父容器中)

+2.mouseover会触发冒泡传播机制,在进入到放大镜盒子后,鼠标此时离开了父容器进入了子元素

var leftBox, smallBox, rightBox, img;

init();

function init() {

leftBox = document.querySelector('.leftBox');

rightBox = document.querySelector('.rightBox');

img = rightBox.querySelector('img');

leftBox.addEventListener('mouseenter', mouseHandler);

}

初始化函数完成以后,进入事件回调函数的编写:

在这个函数中,主要由三部分组成

第一部分,当此时的事件类型为mouseenter时,执行第一条条件语句中的内容:

1.因为一开始的右侧盒子为隐藏状态,只有当鼠标移入左侧盒子时才会显现出来

2.一开始是并不存在放大镜的,只有当鼠标移入左侧盒子后才会生成放大镜,所以我们需要生成一个放大镜的'div',并将其增加我们一开始在css中所写的类名'smallBOx',最后再将创建好的放大镜盒子放入左侧盒子中

3.因为鼠标是在左侧盒子中移动的,所以当进入它后,再为其添加两个事件监听,分别为mousemove和mouseleave,事件回调函数也为此函数(下次进入只需要判断事件类型即可)

if (e.type === 'mouseenter') {

rightBox.style.display = 'block';

smallBox = document.createElement('div');

smallBox.className = 'smallBox';

this.appendChild(smallBox);

this.addEventListener('mousemove', mouseHandler);

this.addEventListener('mouseleave', mouseHandler);

}