共计 962 个字符,预计需要花费 3 分钟才能阅读完成。
JavaScript 是世界上最风行的脚本语言。JavaScript 是属于 web 的语言,它实用于 PC、笔记本电脑、平板电脑和移动电话。JavaScript 被设计为向 HTML 页面减少交互性。许多 HTML 开发者都不是程序员,然而 JavaScript 却领有非常简单的语法。简直每个人都有能力将小的 JavaScript 片段增加到网页中。上面给大家分享下 JavaScript 教程全套视频合集:DOM 动画成果。
DOM 动画成果
让一个元素从左至右进行静止
var box = document.getElementById(“box”);
var t = null;
t = setInterval(function(){
})
静止的终止条件
t = setInterval(function(){终止条件}) // 元素的属性值 === 指标点
if(dom.attr === target){
clearInterval(t);
}
静止的三要素
起始点 一个静止的起始点其实就是以后元素的地位,咱们通过 API 获取以后元素的地位,让这个地位作为静止的起始。指标速度 DOM 动画成果封装
单属性静止框架:
function move(ele , attr , target){
// 1. 敞开开启定时器;
clearInterval(ele.timer);
ele.timer = setInterval(function(){
// 2. 计算速度;
if(attr === “opacity”){
var iNow = parseInt(getComputedStyle(ele)[attr] * 100); //0 ~ 100
}else{
var iNow = parseInt(getComputedStyle(ele)[attr]); //100
}
var speed = (target – iNow) / 10;
// 3. 速度取整;
if(speed > 0){
speed = Math.ceil(speed);
}else{
speed = Math.floor(speed);
}
if(attr === “opacity”){
ele.style[attr] = (iNow + speed) / 100 ;
}else{
ele.style[attr] = iNow + speed + “px”;
}
// 4. 终止条件;
if(iNow === target){
clearInterval(ele.timer);
}
} , 50)