JavaScript 변속 애니메이션 함수 패키지 에 여러 속성 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" id="bt" value=" "/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
// ， ，
//
function getStyle(element, attr) {
//
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
// ，
function animate(element, json) {
//
clearInterval(element.timeId);
//
element.timeId = setInterval(function () {
//
var flag = true;
//
for (var attr in json) {
//
var current = parseInt(getStyle(element, attr));
//
var target = json[attr];
//
var step = (target - current) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
current += step;//
element.style[attr] = current + "px";
if (current != target) {
flag = false;
}
}
if (flag) {
//
clearInterval(element.timeId);
}
//
console.log(" :" + target + ", :" + current + ", :" + step);
}, 20)
}
my$("bt").onclick = function () {
animate(my$("dv"), {"width": 300, "left": 100, "top": 50});
};
</script>
</body>
</html>
/**
* Created by Administrator on 2018/8/18.
*/
/**
* Created by Administrator on 2016/7/27.
*/
/**
* Created by Administrator on 2016/7/21.
*
* x .
*
* :
*/
/*
* ,
* :date ----
* :
* */
function getDatetoString(date) {
var strDate;//
//
var year = date.getFullYear();
//
var month = date.getMonth() + 1;
//
var day = date.getDate();
//
var hour = date.getHours();
//
var minute = date.getMinutes();
//
var second = date.getSeconds();
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
//
strDate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;// ,
return strDate;
}
// id
function my$(id) {
return document.getElementById(id);
}
/*
*
* innerText IE
* textContent
* dvObj.innerText=" "; innerText
* console.log(dvObj.innerText); innerText
* ,inerText ，
* , , IE
*
*
* */
/*
* innerText
* element-----
* content-----
* */
function setInnerText(element, content) {
if (typeof element.textContent === "undefined") {
//IE
element.innerText = content;
} else {
element.textContent = content;
}
}
/*
* innerText
* element
* innerText
* */
function getInnerText(element) {
if (typeof element.textContent === "undefined") {
//IE
return element.innerText;
} else {
return element.textContent;
}
}
//
function getPreviousElement(element) {
if (element.previousElementSibling) {
return element.previousElementSibling;
} else {
var ele = element.previousSibling;
while (ele && ele.nodeType !== 1) {
ele = ele.previousSibling;
}
return ele;
}
}
//
function getNextElement(element) {
if (element.nextElementSibling) {
return element.nextElementSibling;
} else {
var ele = element.nextSibling;
while (ele && ele.nodeType !== 1) {
ele = ele.nextSibling;
}
return ele;
}
}
//
function getFirstElementByParent(parent) {
if (parent.firstElementChild) {
return parent.firstElementChild;
} else {
var ele = parent.firstChild;
while (ele && ele.nodeType !== 1) {
ele = ele.nextSibling;
}
return ele;
}
}
//
function getLastElementByParent(parent) {
if (parent.lastElementChild) {
return parent.lastElementChild;
} else {
var ele = parent.lastChild;
while (ele && ele.nodeType !== 1) {
ele = ele.previousSibling;
}
return ele;
}
}
//
function getsiblings(ele) {
if (!ele)return;// ele
var elements = [];//
var el = ele.previousSibling;//
while (el) {
if (el.nodeType === 1) {//
elements.push(el);//
}
el = el.previousSibling;
}
el = ele.nextSibling;
while (el) {
if (el.nodeType === 1) {
elements.push(el);
}
el = el.nextSibling;
}
return elements;
}
// //
var EventTools = {
//
addEventListener: function (element, eventName, listener) {
if (element.addEventListener) {
element.addEventListener(eventName, listener, false);
} else if (element.attachEvent) {
element.attachEvent("on" + eventName, listener)
} else {
element["on" + eventName] = listener;
}
},
//
removeEventListener: function (element, eventName, listener) {
if (element.removeEventListener) {
element.removeEventListener(eventName, listener, false);
} else if (element.detachEvent) {
element.detachEvent("on" + eventName, listener);
} else {
element["on" + eventName] = null;
}
},
// e
getEvent: function (e) {
return e || window.event;
},
getPageX: function (e) {
if (e.pageX) {
return e.pageX;
} else {
//
// body
//document.documentElement.scrollTop;//
//document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return e.clientX + scrollLeft;
}
},
getPageY: function (e) {
if (e.pageY) {
return e.pageY;
} else {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return e.clientY + scrollTop;
}
}
};
// ---
function getStyle(element, attr) {
return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
}
//
//element json fn
function animate(element, json, fn) {
//
clearInterval(element.timeid);
//
element.timeid = setInterval(function () {
//
var f = true;
//
for (var i in json) {
// opacity
if (i == 'opacity') {
// opacity 100
var current = getStyle(element, i) * 100;
// 100
var target = json[i] * 100;
//
var step = (target - current) / 10;
// 0
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
current += step;
//
element.style[i] = current / 100;
// zIndex
} else if (i == 'zIndex') {
// zIndex
element.style[i] = json[i];
} else {
// （ ）
var current = parseInt(getStyle(element, i));
//
var target = json[i]
// （ ）
var step = (target - current) / 10;
//
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//
current += step;
//
element.style[i] = current + 'px';
}
// F false
if (current != target) {
f = false;
}
//
if (f) {
clearInterval(element.timeid);
if (fn) {
fn();
}
}
}
console.log(" :" + target + ", :" + current + ", :" + step);
}, 20)
}위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 JavaScript 변속 애니메이션 함수 패 키 징 에 여러 개의 속성 을 추가 하 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
