JS 에서 offset 과 등 속 애니메이션 에 대한 상세 한 설명
우 리 는 3 대 가족 이 offset/scroll/client 를 포함한다 는 것 을 안다.오늘 은 offset,그리고 이와 관련 된 등 속 애니메이션 에 대해 말씀 드 리 겠 습 니 다.
오프셋
js 에서 원소 사 이 즈 를 쉽게 얻 을 수 있 는 방법 은 offset 가족 입 니 다.offset 가족 포함:
1.offset Width 와 offset Hight
상자 자체 의 너비+padding+border 를 검사 하 는 데 사용 되 며,margin 은 포함 되 지 않 습 니 다.다음 과 같다.
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
이 두 속성 은 모든 노드 요소 에 연결 되 어 있 습 니 다.가 져 온 후에 이 두 속성 을 호출 하면 우 리 는 요소 노드 의 너비 와 높이 를 얻 을 수 있 습 니 다.
예 를 들 면 다음 과 같다.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid #000;
margin: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var div1 = document.getElementsByTagName("div")[0];
console.log(div1.offsetHeight); // ：140（100+20+20）
console.log(typeof div1.offsetHeight); // ：number
</script>
</body>
</html>상급 상자(포 지 셔 닝 포함)왼쪽 위치 로 돌아 가기;아버지 급 이 자리 잡 지 않 으 면 body 를 기준 으로 합 니 다.
offset Left:아버지의 padding 부터 계산 합 니 다.아버지의 border 는 계산 하지 않 습 니 다.
예:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
width: 300px;
height: 300px;
padding: 100px;
margin: 100px;
position: relative;
border: 100px solid #000;
background-color: pink;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
/*position: absolute;*/
/*left: 10px;*/
/*top: 10px;*/
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<script>
var box2 = document.getElementsByClassName("box2")[0];
//offsetTop offsetLeft
console.log(box2.offsetLeft); //100
console.log(box2.style.left); //10px
</script>
</body>
</html>3、offsetParent
부계 상자 에 포 지 셔 닝 이 있 는 부모 상자 노드 를 검사 합 니 다.결 과 를 되 돌려 주 는 것 은 이 대상 의 부모 급 입 니 다.
현재 요소 의 부모 요소 가 CSS 포 지 셔 닝(position 은 absolute,relative,fixed)이 없 으 면 offsetParent 의 반환 결 과 는 body 입 니 다.
현재 요소 의 부모 급 요소 가 CSS 포 지 셔 닝(position 은 absolute,relative,fixed)이 있다 면,offset Parent 의 반환 결 과 는 가장 가 까 운 부모 급 요소 입 니 다.
예:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<script>
//offsetParent：
// ， body
// ，
var box3 = document.getElementsByClassName("box3")[0];
console.log(box3.offsetParent);
</script>
</body>
</html>
offset Left 와 style.left 의 차이
(1)가장 큰 차이 점 은:
offset Left 는 위치 추적 상자 가 없 는 왼쪽 위 치 를 되 돌려 줍 니 다.부계 상자 에 위치 가 없 으 면 body 를 기준 으로 합 니 다.
style.left 는 줄 내 식 만 가 져 올 수 있 습 니 다.없 으 면''로 돌아 갑 니 다.
(2)offsetTop 은 숫자 를 되 돌려 주 고 style.top 은 문자열 을 되 돌려 주 며 단위:px 도 있 습 니 다.
예 를 들 면:
div.offsetLeft = 100;
div.style.left = "100px";(4)HTML 요소 에 top 스타일 을 지정 하지 않 았 다 면 style.top 은 빈 문자열 을 되 돌려 줍 니 다.
요약:우리 의 일반적인 방법 은 offsetLeft 와 offsetTop 으로 값 을 얻 고 style.left 와 style.top 으로 값 을 부여 하 는 것 입 니 다(비교적 편리 합 니 다).이 유 는 다음 과 같다.
style.left:줄 내 식 만 가 져 올 수 있 습 니 다.가 져 온 값 이 비어 있 을 수 있 습 니 다.NaN 이 나타 나 기 쉽 습 니 다.
offset Left:획득 값 이 매우 편리 하고 기 존의 number 로 계산 하기 편리 합 니 다.그것 은 읽 기만 하고 값 을 부여 할 수 없다.
애니메이션 종류
반짝반짝
4.567917.등 속(본 고의 중점)완만 한 움직임(후속 중점)간단 한 예 를 들 어 다음 과 같다.(간격 500 ms,상자 100 px 를 오른쪽으로 이동)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<button> </button>
<div class="box"></div>
<script>
var btn = document.getElementsByTagName("button")[0];
var div = document.getElementsByTagName("div")[0];
//1、
// btn.onclick = function () {
// div.style.left = "500px";
// }
//2、
btn.onclick = function () {
// ，
setInterval(function () {
console.log(parseInt(div.style.left));
// ： = + ；
// style.left ， offsetLeft 。
div.style.left = div.offsetLeft + 100 + "px";
//div.style.left = parseInt(div.style.left)+10+"px"; //NaN
}, 500);
}
</script>
</body>
</html>
등 속 애니메이션 의 패키지:간격 30ms,이동 상자 10px[중요]
코드 는 다음 과 같 습 니 다:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box1 {
margin: 0;
padding: 5px;
height: 300px;
background-color: #ddd;
position: relative;
}
button {
margin: 5px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 195px;
top: 40px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 0;
top: 150px;
}
</style>
</head>
<body>
<div class="box1">
<button> left = 200px</button>
<button> left = 400px</button>
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
var btnArr = document.getElementsByTagName("button");
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
//
btnArr[0].onclick = function () {
// ，
// ， 。
animate(box2, 200);
animate(box3, 200);
}
btnArr[1].onclick = function () {
animate(box2, 400);
animate(box3, 400);
}
//【 】 ： 30ms， 10px
function animate(ele, target) {
// ，
// ， ，
// ，
clearInterval(ele.timer);
// ，
// ，
var speed = target > ele.offsetLeft ? 10 : -10; //speed
ele.timer = setInterval(function () {
//
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
// ， ，
// ，
if (Math.abs(val) < Math.abs(speed)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 30)
}
</script>
</body>
</html>
위의 코드 에 있 는 방법 은 템 플 릿 절차 로 포장 할 수 있 으 니 기억 하 세 요.사실 이 포장 방법 은 다음 과 같이 쓰 면 더욱 엄밀 하고 이해 하기 쉽다.(if 문 구 를 개선 했다)
//【 】 ： 30ms， 10px
function animate(ele, target) {
// ，
// ， ，
// ，
clearInterval(ele.timer);
// ，
// ，
var speed = target > ele.offsetLeft ? 10 : -10; //speed
ele.timer = setInterval(function () {
//
var val = target - ele.offsetLeft;
// ， ，
// ，
if (Math.abs(val) < Math.abs(speed)) { // val ， ； ，
ele.style.left = target + "px";
clearInterval(ele.timer);
} else {
ele.style.left = ele.offsetLeft + speed + "px";
}
}, 30)
}
전체 버 전 코드 는 다음 과 같 습 니 다.(주석 이 비교적 상세 합 니 다)
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> </title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: yellow;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: ' ';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
<script>
window.onload = function () {
// ： 。
// ： ul ，
// ，
// ，
// ：
//1. 。（ ）
//2. li, ul 。
//3. ol li，ul -1 ， 。
//4. ol li
//5.
//6. （ ， ）
//1. 。（ ）
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;
//2. li, ul 。
var ulNewLi = ul.children[0].cloneNode(true);
ul.appendChild(ulNewLi);
//3. ol li，ul -1 ， 。
for (var i = 0; i < ul.children.length - 1; i++) {
var olNewLi = document.createElement("li");
olNewLi.innerHTML = i + 1;
ol.appendChild(olNewLi)
}
var olLiArr = ol.children;
olLiArr[0].className = "current";
//4. ol li
for (var i = 0; i < olLiArr.length; i++) {
// ， index
olLiArr[i].index = i;
olLiArr[i].onmouseover = function () {
//
for (var j = 0; j < olLiArr.length; j++) {
olLiArr[j].className = "";
}
this.className = "current";
// key square
// key = this.index;
// square = this.index;
key = square = this.index;
//
animate(ul, -this.index * imgWidth);
}
}
//5.
var timer = setInterval(autoPlay, 1000);
//
// （ ， ）
var key = 0;
var square = 0;
function autoPlay() {
// key ， ul
key++;
if (key > olLiArr.length) {
// ， ， ，
ul.style.left = 0;
key = 1;
}
animate(ul, -key * imgWidth);
// square ，
//
square++;
if (square > olLiArr.length - 1) {// 5， 5， 0；
square = 0;
}
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
// ，
all.onmouseover = function () {
div.style.display = "block";
clearInterval(timer);
}
all.onmouseout = function () {
div.style.display = "none";
timer = setInterval(autoPlay, 1000);
}
//6. （ ， ）
spanArr[0].onclick = function () {
// key ， ul
key--;
if (key < 0) {
// ， key ，
ul.style.left = -imgWidth * (olLiArr.length) + "px";
key = olLiArr.length - 1;
}
animate(ul, -key * imgWidth);
// square ，
//
square--;
if (square < 0) {// 5， 5， 0；
square = olLiArr.length - 1;
}
for (var i = 0; i < olLiArr.length; i++) {
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
spanArr[1].onclick = function () {
//
autoPlay();
}
function animate(ele, target) {
clearInterval(ele.timer);
var speed = target > ele.offsetLeft ? 10 : -10;
ele.timer = setInterval(function () {
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if (Math.abs(val) < Math.abs(speed)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 10)
}
}
</script>
</head>
<body>
<div class="all" id='all'>
<div class="screen">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
<ol>
</ol>
<div>
<span><</span>
<span>></span>
</div>
</div>
</div>
</body>
</html>
따뜻 한 알림:움 직 이 는 그림 이 너무 커서//img.jbzj.com/file_images/article/201802/201802061116064.gif브 라 우 저 에서 단독으로 열 수 있 습 니 다.
프로젝트 파일:
2018-02-02-JS 애니메이션 윤 방도 실현
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
