JS 및 CSS3는 마우스 움직임에 따른 이미지 확대/축소 효과의 예를 구현합니다.
- 不言원래의
- 2018-05-05 15:46:271310검색
이 글에서는 마우스 움직임에 반응하여 이미지 확대 효과를 얻기 위한 JS와 CSS3를 주로 소개합니다. 예제를 결합하여 마우스 이벤트에 반응하여 페이지 요소 속성을 동적으로 수정하여 이미지 확대 효과를 얻기 위한 javascript와 css3의 관련 작동 기술을 분석합니다. . 도움이 필요한 친구들이 참고할 수 있습니다
이 글에서는 마우스 움직임에 따라 이미지가 확대/축소되는 효과를 구현하는 JS와 CSS3의 예를 설명합니다. 참고하실 수 있도록 자세한 내용은 다음과 같습니다.
오늘 넷이즈 홈페이지에 가보니 사진이 확대되다가 축소되서 옮겨졌네요. 그래서 제가 직접 시도해 본 결과는 다음과 같습니다.
방법 1: js 및 css3 사용
효과는 그림과 같습니다.
이 구현은 매우 간단합니다. js의 mouseover 및 mouseout 이벤트를 사용하면 됩니다. 중간에 확대해서 어떻게 만드는지 모르겠어서 나중에 다시 시도해 보세요. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>网易图片动画</title>
<style>
p.img {
width: 220px;
height: 170px;
margin: 200px auto;
overflow: hidden;
}
img.bigger {
width: 100%;
height:100%;
}
@keyframes bigger {
from {width: 100%;height: 100%;}
to {width: 110%; height: 110%;}
}
@keyframes smaller {
from {width: 110%;height: 110%;}
to {width: 100%; height: 100%;}
}
</style>
</head>
<body>
<p class="img">
<img class="bigger" src="http://cms-bucket.nosdn.127.net/d9b6afa0bad743f88c1780c3a064202c20170218074455.jpeg?imageView&thumbnail=185y116&quality=85" alt="">
</p>
<script>
var img = document.querySelector("img");
img.onmouseover = function () {
img.style.cssText = "animation: bigger 2s;width:110%; height:110%;";
}
img.onmouseout = function () {
img.style.cssText = "animation: smaller 2s";
}
</script>
</body>
</html>
방법 2: css3 방법을 사용하세요
css3 실제로 우리에게 많은 이점을 가져다 주었고 문제를 더 쉽게 처리할 수 있게 해주었습니다. 이는 transform:scale();를 사용하여 달성할 수 있지만 더 나은 결과를 얻으려면 전환 기간을 설정해야 합니다. 효과는 다음과 같습니다.
아니요. 그러면 효과가 훨씬 좋아지죠? 그 자체를 보는 것은 중심에서 확장하는 것입니다.
그러나 transform-origin 속성을 추가하는 한 다음과 같이 변경의 중심점을 잘 제어할 수 있습니다.
transform-origin: 0 0; transform-origin: 100% 0; transform-origin: 0 100%; transform-origin: 100% 100%;
은 왼쪽 위 모서리, 오른쪽 위 모서리, 왼쪽 아래에서 확장을 의미합니다. 모서리와 오른쪽 하단 모서리는 각각 50% 50%입니다. 권장 사항:
전체 page_javascript 기술을 포괄하는 팝업 레이어를 구현하는 JS 및 CSS 방법위 내용은 JS 및 CSS3는 마우스 움직임에 따른 이미지 확대/축소 효과의 예를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!