链式运动JavaScript实现

傷城~ 2022-05-27 12:30 191阅读 0赞

**html代码**

<div></div>
    <div></div>
    <div></div>
    <div>你这一辈子有没有为别人拼过命</div>

**css代码**

div {
                width: 100px;
                height: 100px;
                background: red;
                margin-bottom: 50px;
                opacity: 0.3;
            }

**JS代码**

function getStyle(obj, attr) {
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
    
        function move(obj, iTarget, attr, fn) {
            //1、关闭定时器
            clearInterval(obj.timer);
            //开启定时器
            obj.timer = setInterval(function () {
                //判断用户是否获取的透明度
                var iCur;
                if (attr == "opacity") {
                    //parseInt:防止在IE出现闪烁问题
                    iCur = parseInt(parseFloat(getStyle(obj, attr) * 100));
                } else {
                    //将字符串转换为数字
                    iCur = parseInt(getStyle(obj, attr));
                }
                //算速度
                var speed = (iTarget - iCur) / 8;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                //判断
                if (iCur == iTarget) {
                    clearInterval(obj.timer);
                    fn && fn()
                } else {
                    if (attr == "opacity") {
                        obj.style.opacity = (iCur + speed) / 100;
                        obj.style.filter = "alpha(opacity:" + (iCur + speed) + ")";
                    } else {
                        obj.style[attr] = iCur + speed + 'px';
                    }
                }
            }, 30)
        }
    
        var aDiv = document.querySelectorAll("div");
        aDiv[0].onmouseover = function () {
            move(this, 300, "width", function () {
                move(aDiv[0], 300, "height")
            });
        };
    
        aDiv[1].onmouseover = function () {
            move(this, 300, "height");
        };
    
        aDiv[2].onmouseover = function () {
            move(this, 100, "opacity");
        };
    
        aDiv[3].onmouseover = function () {
            move(this, 60, "fontSize");
        }

发表评论取消回复

表情：

评论列表（有 0 条评论，191人围观）

还没有评论，来说两句吧...

相关阅读

相关 js运动技术--链式运动框架

其原理是函数startMove多了一个参数，这个参数是一个函数，可以在定时器结束时调用。 <!DOCTYPE html> <html> <head>

你的名字/ 2024年02月17日 23:20/ 0 赞/ 70 阅读

相关 javascript 链式栈

function Stack() { this.top = null; this.size = 0; } Stack.pr

男娘i/ 2024年02月17日 15:16/ 0 赞/ 77 阅读

相关 48、JavaScript的运动----无缝运动的实现

1、JavaScript的运动----无缝运动的实现 2、测试代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

蔚落/ 2022年09月22日 04:58/ 0 赞/ 161 阅读

相关 45、JavaScript的运动----链式运动----回调函数fn参数的添加

1、链式运动框架回调函数 • 运动停止时，执行函数 • 运动停止时，开始下一次运动 2、测试代码

秒速五厘米/ 2022年09月22日 04:58/ 0 赞/ 153 阅读

相关链式运动

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

旧城等待，/ 2022年07月14日 11:19/ 0 赞/ 157 阅读

相关链式运动JavaScript实现

html代码 <div></div> <div></div> <div></div> <div>你这一辈子有没有为别人拼过命</div>

傷城~/ 2022年05月27日 12:30/ 0 赞/ 192 阅读

相关抛物线运动JavaScript实现

html代码 <div id="goods"></div> css代码 { margin: 0;

柔光的暖阳◎/ 2022年05月27日 12:29/ 0 赞/ 248 阅读

相关加速运动、减速运动、弹性运动和碰撞运动JavaScript实现

html代码 <div id="box"></div> css代码 { margin: 0;

素颜马尾好姑娘i/ 2022年05月27日 12:20/ 0 赞/ 260 阅读

相关多物体链式运动，多值同时运动

实现函数 / 多物体链式运动，多值同时运动 / function startMove(obj, json, callback){

梦里梦外;/ 2022年05月22日 09:00/ 0 赞/ 221 阅读

相关 javascript 动画效果（多物体缓冲运动,多物体透明度变化，匀速移入移出、链式运动、同时运动）

多物体缓冲运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

- 日理万妓/ 2021年11月05日 05:00/ 0 赞/ 282 阅读