javascript - 为什么我会收到“预期分配或函数调用,而是看到一个表达式”和此图像缩放代码的“缺少分号””
问题描述
我正在做另一个图像缩放项目,并且再次遇到了同样的错误,它在 JS 代码的最后一行中声明它“期望一个赋值或函数调用,而是看到一个表达式”。此外,我在 codepen 中收到一个错误,指出即使有分号,我也缺少分号(除非我要把它放在其他地方?)帮助解决这个问题将不胜感激!
我两次又两次遇到相同的错误,这有点令人沮丧,我无法自己解决。我也很想听听我能做些什么来解决这样的问题以及我自己的任何类似问题。
笔记:
我没有在片段中添加我的事件监听器代码。
// VARIABLES
const mainPic = document.querySelector("#pic");
const mainPicContainer = document.querySelector("#mainPictureContainer");
const pic1 = document.querySelector("#pic1");
const pic2 = document.querySelector("#pic2");
const pic3 = document.querySelector("#pic3");
const pic4 = document.querySelector("#pic4");
const pic5 = document.querySelector("#pic5");
const picArr = [
pic1,
pic2,
pic3,
pic4,
pic5
];
let picActive = 1;
const hoverRect = document.querySelector("#hoverRect");
//"zoom window"
const zoom = document.querySelector('#zoom');
//"zoom ratio"
let ratio = 3;
//"coordinates of mouse cursor"
let x, y, xx, yy;
//"Width & height of main picture in px"
let w1 = mainPicContainer.offsetWidth;
let h1 = mainPicContainer.offsetHeight;
//console.log(w1, h1); //420 854
//"width & height of selector"; the hoverbox
let w2 = hoverRect.offsetWidth;
let h2 = hoverRect.offsetHeight;
//"zoom window bg-img size"
zoom.style.backgroundSize = w1 * ratio + "px " + h1 * ratio + "px ";
//"zoom window width & height"
zoom.style.width = w2 * ratio + "px";
zoom.style.height = h2 * ratio + "px";
//"1/2 the selector shows outside of main picture; need 1/2 of width & height" (1/2 of the hoverbox)
w2 = w2 / 2;
h2 = h2 / 2;
pic1.classList.add("image-active");
// FUNCTION
//change the image of the mainPic block w/ current img
function changeImage(imgSrc, n){
//"This will change the main img"
mainPic.src = imgSrc;
//"remove box-shadow style from prev active side picture"
picArr[picActive - 1].classList.remove('image-active');
//"add box shadow to active side picture"
picArr[n - 1].classList.add('image-active');
//"update active side picture"
picActive = n;
}
//"moving the selector box" (#hoverRect)
function move(event){
//"how far the mouse cursor from an element"
x = event.offsetX; //"how far the cursor from left of element"
y = event.offsetY; //" ... top of element"
// console.log(x,y);
xx = x * ratio;
yy = y * ratio;
//"keeping the selector inside the main picture"
//"left of main picture"
if(x < w2){
x = w2;
}
//"right of main picture"
if(x > w1 - w2){
x = w1 - w2;
}
//"top..."
if(y < h2){
y = h2;
}
//"bottom..."
if(y > h1 - h2){
y = h1 - h2;
}
/* NOTE TO SELF
put the if statemnts before the hoverRect.style.left etc etc
for some reason, putting it after won't make the hover box stay w/i main picture"*/
//changing position of selector
//this is what will make the gray box move & the cursor will follow
hoverRect.style.left = x + "px";
hoverRect.style.top = y + "px";
//"changing bg image of zoom window"
zoom.style.backgroundPosition = '-' + xx + 'px ' + '-' yy + 'px'; //ERROR -
}
//IMAGES
.image-container{
display: flex;
flex-wrap: wrap;
background: lightGray;
padding: 10px;
div{
margin: 10px;
//background: blue;
}
}
.pictures{
width: 64px;
}
.shoe-image{
width: 100%;
}
///////// mainPic Div
.mainPicture{
width: 500px;//420px;
height: 500px; //840px;
position: relative;
background: yellow;
}
#pic{
width: 100%;
}
/* .explanation{
position: relative;
top: -514px;
height: 100%;
width: 30px;
background: blue;
}*/
//HOVER RECT
#hoverRect{
position: absolute;
margin: 0 !important;
padding: 0;
width: 200px;
height: 150px;
background-color: gray;
transform: translate(-50%, -50%); //this will make the cursor stay in center of the block
pointer-events: none; //this will resolve the glitchy movement of cursor
opacity: 0.4; //0
}
////////////////
//Zoom
.zoom{
position: relative;
top: 100px;
left: 20px;
background-image: url("https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg");//pic1
box-shadow: 0 0 3px black;
}
// JS CLASS
.image-active{
box-shadow: 0 0 3px gray;
}
.hoverRect-active{
opacity: 1;
}
<header>
<div class="banner">
<span>for educational purposes only</span>
</div>
</header>
<section class="image-container">
<div class="pictures">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg" alt="side view of shoes" id="pic1" class="shoe-image">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/a8dd72b84eb74a86a460ad1e00dd0db5_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_02_standard_hover.jpg" alt="top view of shoes" id="pic2" class="shoe-image">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/680f4199aa6e4226b539ad1e00dd1513_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_03_standard.jpg" alt="bottom/sole of shoes" id="pic3" class="shoe-image">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/8375f145b0f1441f8c7aad1e00dd0657_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_06_standard.jpg" alt="inner side of shoes" id="pic4" class="shoe-image">
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/497f4207b21b4933836bad1e00dd22d9_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_05_standard.jpg" alt="back view of shoes" id="pic5" class="shoe-image">
</div>
<div class="mainPicture" id="mainPictureContainer">
<div class="hoverRect" id="hoverRect"></div>
<img src="https://assets.adidas.com/images/h_840,f_auto,q_auto:sensitive,fl_lossy/c3bd9dda9fdd4a7cbc9aad1e00dd0045_9366/NMD_R1_Primeblue_Shoes_White_GZ9260_01_standard.jpg" alt="side view of shoes" id="pic" >
<div class="explanation"></div>
</div>
<div class="zoom" id="zoom"></div>
</section>
<button>Show Var Explanation</button>
解决方案
+
因为你在最后错过了一个yy
zoom.style.backgroundPosition = '-' + xx + 'px ' + '-' + yy + 'px';
更整洁更清晰
zoom.style.backgroundPosition = `-${xx}px -${yy}px`;
推荐阅读
- python - Windows 命令提示符 ImportError 中的 Python Pandas:无法导入所需的依赖项:numpy (Anaconda)
- flutter - 如何更新屏幕上的目录文件?
- java - 如何将数据从广播接收器传递到 Android 中的活动
- c++ - find(vector.begin(),vector.end(), A[i])==vector.end() 的工作
- javascript - Express.js - 我无法设置 Content-Type
- java - 用于跨多个服务填充对象数据的设计模式
- go - 从 DynamoDB 获取项目时如何配置超时
- flutter - 待办事项列表的问题
- java - 休眠表或视图不存在 Oracle
- css - 更改左下垂直半径 React Native