链式运动JavaScript实现

傷城~ 2022-05-27 12:30 172阅读 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 条评论，172人围观）

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

相关阅读

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

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

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

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

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

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

相关 40、JavaScript的运动----缓冲运动

1、缓冲运动 • 逐渐变慢，最后停止 • 距离越远速度越大 – 速度由距离决定 – 速度 = (目标值 \- 当前值 ) / 缩放系数

曾经终败给现在/ 2022年09月21日 13:07/ 0 赞/ 202 阅读

相关 JavaScript实现的抛物线运动效果

原文：[http://www.css88.com/archives/5355][http_www.css88.com_archives_5355] 作者的主要实现代码：

ゝ一世哀愁。/ 2022年08月06日 14:07/ 0 赞/ 204 阅读

相关链式运动

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

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

相关链式运动JavaScript实现

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

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

相关抛物线运动JavaScript实现

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

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

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

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

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

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

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

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

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

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

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