原生JS实现各种运动之复合运动
更新时间：2021年08月23日 16:28:08 作者：aiguangyuan
这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下：
实现代码如下，欢迎大家复制粘贴及吐槽。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现各种运动之复合运动</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
opacity: 0.3;
}
</style>
<script>
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//设定开关，防止某一个值达到后其它值停止变化
var bStop = true;
for (var attr in json) {
var iCur = 0;
if (attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} else {
iCur = parseInt(getStyle(obj, attr));
};
var iSpeed = (json[attr] - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//如果某一个值还没有达到，bStop就为false
if (iCur != json[attr]) {
bStop = false;
};
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
//最后一轮循环时如果为true，才清除定时器
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 30)
}
</script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function () {
startMove(oDiv, {
width: 400,
height: 200,
opacity: 100
});
};
};
</script>
</head>
<body style="background:#0F0;">
<input id="btn1" type="button" value="开始运动" />
<div id="div1"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
代码生成器 document.write()...2007-04-04
这篇文章主要介绍了javascript 分号总结及详细介绍的相关资料,需要的朋友可以参考下2016-09-09
这篇文章主要为大家详细介绍了用JS常用几个算法的实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要为大家详细介绍了webpack常用配置项配置文件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了JavaScript递归函数定义与用法,结合实例形式分析了javascript递归的原理、函数定义、使用方法及操作注意事项,需要的朋友可以参考下2019-01-01
这篇文章主要来和大家探讨在 Bash 中调用 Node 运行 JS 文件时如何进行数据通信,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-03-03
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
这篇文章主要介绍了JS正则匹配URL网址的方法,可实现匹配www,http开头的一切网址的功能,涉及JS正则匹配字符串、数字及特殊字符构建URL的操作技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了Javascript中数组去重与拍平的相关资料，因为这是实际业务开发中经常遇到的，文中开始先进行了数组的判断介绍，因为在处理数组之前判断数据是不是数组很重要，有需要的朋友可以参考借鉴，下面来一起看看吧。2017-02-02
这篇文章主要为大家介绍了如何利用JavaScript实现开心消消乐小游戏,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了Javascript实现的简单右键菜单类,通过JavaScript自定义类实现右键菜单功能,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
最新评论