<body>
<div class="container">
<!--mockup-->
<div class="mockup-wrap">
<div class="mockup">
<img src="./mockup.jpg" alt="">
</div>
<div class="mask">
<img src="./site.jpg" alt="">
</div>
</div>
</div>
</body>
구조
적용할 목업을 위에 두고 마스킹할 영역을 지정하고 그 안에 이미지를 넣어서 구조를 배치해준다.
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
img{
max-width: 100%;
}
.mockup-wrap{
width: 600px; position: relative;
margin: 50px;
border: 2px dotted dodgerblue;
}
.mask{
width: 390px; height: 250px;
border: 2px dotted red;
overflow: hidden;
position: absolute;
top: 170px; left: 108px;
}
.pic{
position: absolute; top:0; left: 0; transition: 1s;
}
</style>
기본 초기화를 설정하고 크기를 설정해준다. 마스킹할 영역을 높이와 넓이로 설정하고 그 외의 부분은 hidden으로 감추고 목업에 맞게 위치를 설정해준다. 이미지가 자바에 맞게 부드럽게 변하고 해당 스타일이 자바에 적용되도록 자바에 넣어줄 요소도 함께 지정해 넣어준다.
<script>
let pic=document.querySelectorAll(".pic");
//이미지의 전체 높이값 - 화면의 보이는 부분을 = 화면밖에 숨어있는 이미지 높이값
let maskH=document.querySelector("#mask").offsetHeight; //화면에 보이는 부분 - 높이가 다 같을때
//console.log(picH, maskH, resultH)
pic.forEach((el)=>{
el.addEventListener("mouseover", (e)=>{
let tar=e.currentTarget; //this 대신해서 타겟선택
//let maskH=tar.closest(".mask").offsetHeight; //상위 요소를 선택하도록 하여서 mask에 All로 지정하지 않고도 전체적으로 선택이 가능하게 된다. 이는 높이 값이 다를경우 사용하게 된다.
let picH=tar.offsetHeight;//이미지의 전체 높이값
let resultH=picH-maskH;
console.log(picH, maskH, resultH)
el.style.top=`-${resultH}px`
})
})
pic.forEach((el)=>{
el.addEventListener("mouseout", (e)=>{
let tar=e.currentTarget;
let picH=tar.offsetHeight;
let resultH=picH-maskH;
el.style.top=`0px`
})
})
</script>
ddd
return문은 함수 내부에서 처리한 결과 값을 함수 외부로 전달하기 위해 사용하는 출력값으로 여러 역할로 만들 수 있다.
데이터를 반환하는 return 함수 안에 주어진 값을 함수 호출 지점으로 반환
> 함수 내부의 결과를 외부로 보내준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVASCRIPT</title>
<script>
/*
데이터를 반환하는 return
함수안에 주어진 값을 함수 호출 지점으로 반환 - 함수내부의 결과를 외부로 보내준다
*/
let result=sum(5,10);
document.write(`정답은 ${result} 입니다.`) //해당 식을 바로 적용 되지 않는데 지역변수이고 바깥의 식에 들어가지 않기 때문이다 이때 return을 사용해 바깥으로 내보내면 식이 적용 된다.
function sum(num1, num2){
let result=num1+num2
return result;
}//같은 변수 이름을 선언했지만 지역, 전역으로 나뉘어 있기 때문에 오류가 뜨진 않는다.
</script>
</head>
<body>
</body>
</html>
<script>
function testBreak(num){
let i=0;
while(i<6){//i가 6보다 작아질때까지만 반복실행
if(i===3){//i가 3이 된다면 break로 if 식에서 빠져나간다.
break;
}
i++;
}//나와서 return으로 가서 해당식을 적용하여 외부로 나가게 된다.
//여기서는 3이된 i에 num을 곱해서 나가는식이다.
return i*num
}
function testReturn(num){
let i=0;
while(i<6){//i가 6보다 작아질때까지만 반복실행
if(i===3){
return; //식에서 빠져나오는것이 아니라 식이 끝나버림
}
i++;
}
return i*num
}
document.write(testBreak(2))//num에 2가 들어갓을떄의 값으로 나오기 때문에 3에서 2를 곱한 6이 출력된다.
document.write(testReturn(2))//식이 종료 되었기 때문에 아래의 식이 적용 되지 않아서 출력값이 나오지 않게된다.
</script>