原生JS实现各种运动之复合运动
原生JS实现各种运动之复合运动,博智网带你了解详细信息 。
本文给大家分享一个用原生JS实现的复合运动，所谓复合运动就是在同一个进间段内不同的属性都会发生变化，效果如下：
【原生JS实现各种运动之复合运动】实现代码如下，欢迎大家复制粘贴及吐槽 。
<!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现各种运动之复合运动</title><style>#p1 {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就为falseif (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('p1');oBtn.onclick = function () {startMove(oDiv, {width: 400,height: 200,opacity: 100});};};</script></head> <body style="background:#0F0;"><input id="btn1" type="button" value="https://www.yf-zs.com/redian/开始运动" /><p id="p1"></p></body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持趣讯吧 。
