放大镜如何用js
例如:
let imgs = {
small: ["imgA_1.jpg", "imgB_1.jpg", "imgC_1.jpg"],
middle: ["imgA_2.jpg", "imgB_2.jpg", "imgC_2.jpg"],
large: ["imgA_3.jpg", "imgB_3.jpg", "imgC_3.jpg"]
}; handleSmall();
handleMiddle();
handleMove(); function handleSmall(){
// 渲染小图
smallImg.innerHTML = imgs.small.map((item, index) => {
return `<li><a href="#"><img src="./images/${item}" _id="${index}" class="imgLi" /></a></li>`
}).join(""); smallImg.addEventListener("mouseover", (e) => {
if(e.target.nodeName === "IMG"){ let imgArr = document.getElementsByClassName("imgLi");
for(let i = 0;i < imgArr.length;i++){
imgArr[i].style.borderColor = "transparent";
}
e.target.style.borderColor = "black"; let i = e.target.getAttribute("_id");
middleImg.style.background = `url("./images/${imgs.middle[i]}") no-repeat`;
largeImg.style.background = `url("./images/${imgs.large[i]}") no-repeat`;
}
}, false);
} function handleMiddle(){
middleImg.addEventListener("mouseover", () => {
largeImg.style.display = "block";
enlarge.style.display = "block";
}, false)
middleImg.addEventListener("mouseout", () => {
largeImg.style.display = "none";
enlarge.style.display = "none";
}, false)
} function handleMove(){
middleImg.addEventListener("mousemove", (e) => {
// 鼠标相对于文档显示区的坐标
let mouseX = e.clientX;
let mouseY = e.clientY;
// middleImg 相对于文档显示区的坐标
let middleX = middleImg.offsetLeft;
let middleY = middleImg.offsetTop; let moveX = mouseX - middleX - enlarge.offsetWidth / 2;
let moveY =mouseY -middleY - enlarge.offsetHeight / 2; if(moveX <= 0){
moveX = 0;
}else if(moveX >= middleImg.clientWidth - enlarge.offsetWidth){
moveX = middleImg.clientWidth - enlarge.offsetWidth
}
if(moveY <= 0){
moveY = 0;
}else if(moveY >= middleImg.clientHeight - enlarge.offsetHeight){
moveY = middleImg.clientHeight - enlarge.offsetHeight
} enlarge.style.left = moveX + "px";
enlarge.style.top = moveY + "px"; largeImg.style.backgroundPositionX = -moveX * (800 / 430) + "px";
largeImg.style.backgroundPositionY = -moveY * (800 / 430) + "px"; }, false)
}
放大镜如何用js的更多相关文章
- 360极速浏览器UA怪异以及如何用js判断360浏览器
本文最后一次更新于7个月前,文章内容可能略有出入.若发现文章中有错误之处,可以留言评论告诉作者. 1.360极速浏览器UA因域名不同而异 今天在写一个判断浏览器.浏览器版本.操作系统.操作系统版本.浏 ...
- 如何用js检测判断时间日期的间距
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...
- 如何用js判断一个对象是不是Array
.如何用js判断一个对象是不是Array 1.Array.isArray(obj) 调用数组的isArray方法 2.obj instanceof Array 判断对象是否是Array的实例 3.Ob ...
- 如何用 js 实现一个 class 类函数
如何用 js 实现一个 class 类函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refere ...
- 如何用 js 实现一个 apply 函数
如何用 js 实现一个 apply 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referen ...
- 如何用 js 实现一个 call 函数
如何用 js 实现一个 call 函数 原理 实现方式 总结 refs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Referenc ...
- 如何用 js 实现一个 sleep 函数
如何用 js 实现一个 sleep 函数 原理 实现方式 总结 refs js sleep xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- 如何用 js 实现一个 new 函数
如何用 js 实现一个 new 函数 原理 new 关键字实现经过了如下过程 创建一个空对象 obj = {} 链接到原型 obj.proto = constructor.prototype 绑定 t ...
随机推荐
- python之迭代器、可迭代对象、生成器、生成器对象、枚举类型
迭代器 # 迭代器:循环反馈的容器(集合类型)# -- 不同于索引取值,但也可以循环的从容器对象中从前往后逐个返回内部的值# 优点:不依赖索引,完成取值# 缺点:不能计算长度,不能指定位取值(只能从 ...
- 随笔--第一次使用crontab linux选择编辑器问题
第一次使用crontab 时,会出现:no crontab for root - using an empty one “Select a editor ......”下面有几个选项,就是叫你选择编辑 ...
- 关于c调用lua 对‘luaL_newstate()’未定义的引用的问题解决办法
#include <string.h>#include "lua.h"#include "lauxlib.h"#include "lual ...
- Mac下安装SecureCRT客户端并激活
1. 先下载SecureCRT和破解文件 默认下载到了当前用户的”下载”目录中 2. 在”Finder”中 打开 “scrt-7.3.0-657.osx_x64.dmg” 并将 SecureCRT复制 ...
- soap-ws获取ws中的所有的接口方法
soap-ws获取wsdl中的所有的接口方法 示例wsdl文件如下,生成的过程可以参考https://www.cnblogs.com/chenyun-/p/11502446.html: <def ...
- PAT A1035 Password (20)
AC代码 注意创造函数条件中使用引用 输出语句注意单复数 #include <cstdio> #include <cstring> #include <iostream& ...
- PHP中addslashes()和htmlspecialchars() 函数的区别及应用
addslashes()防sql注入: 定义如下: addslashes() 函数返回在预定义字符之前添加反斜杠的字符串. 预定义字符是: 单引号(') 双引号(") 反斜杠(\) NULL ...
- WEBAPI 最近更新项目时 服务器总是提示:An error has occurred.
解决办法: 在webconfig中设置 <system.web><customErrors mode="Off"/></system.web> ...
- webmagic学习之路-1:采集安居客列表页测试
---恢复内容开始--- package com.action; import java.util.ArrayList; import java.util.List; import java.util ...
- 上述代码在JavaScript事件处理中
上述代码在JavaScript事件处理中很常见,主要设置为与旧版本的Internet Explorer(主要在IE9之前)兼容,因为旧版本的IE不支持标准的W3C事件处理规范. 此代码中的e表示事件对 ...