js运动框架完美运动框架2--这个才有效

最新推荐文章于 2024-08-11 18:40:36 发布
最新推荐文章于 2024-08-11 18:40:36 发布
阅读量491 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qiangD/article/details/47335675
版权 
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }

    textarea {
        position: fixed;
        right: 0;
        top: 50px;
    }

    div {
        margin-top: 10px;
        width: 100px;
        height: 30px;
        background: red;
        border: 1px solid green;
        cursor: pointer;
        opacity: 0.3;
        filter: alpha(opacity=30);
    }
    </style>
</head>

<body style="height:3000px;">
    <textarea name="" id="" cols="30" rows="10"></textarea>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <script src="test.js">
    fontSize
    </script>
    <script>
    window.onload = function() {
        var oDiv1 = document.getElementsByTagName('div');

        // for (var i = 0, len = oDiv1.length; i < len; i++) {
        //     oDiv1[i].timer = null;
        //     oDiv1[i].onclick = function() {
        //         var that = this;
        //         uniformMove(that, {
        //             "width": 300,
        //             "height": 100,
        //             "opacity": 100
        //         }, 10, function() {
        //             uniformMove(that, {
        //                 "width": 100,
        //                 "height": 30,
        //                 "opacity": 30
        //             }, -10);
        //         });
        //     };
        // }

        for (var i = 0, len = oDiv1.length; i < len; i++) {
            oDiv1[i].timer = null;
            oDiv1[i].onclick = function() {
                var that = this;
                startMove(that, {
                    "width": 300,
                    "height": 100,
                    "opacity": 100
                }, function() {
                    startMove(that, {
                        "width": 100,
                        "height": 30,
                        "opacity": 30
                    });
                });
            };
        }
    }
    </script>
</body>





/**
 * [getStyle 获取计算出来的样式]
 * @param  {[type]} obj  [元素对象]
 * @param  {[type]} attr [属性名]
 * @return {[type]}      [对应属性名的值]
 */
function getStyle(obj, attr) {
    /*兼容IE678*/
    if (obj.currentStyle) {
        // IE
        return obj.currentStyle[attr];
    } else {
        // 其他
        return getComputedStyle(obj, false)[attr];
    }
}

/**
 * [startMove 完美运动框架缓冲运动]
 * @param  {[Ojbect]} obj    [description]
 * @param  {[Ojbect json]} jsonObj [json对象]
 * @return {[type]}        [没有返回值]
 */
function startMove(obj, jsonObj, fn) {
    clearInterval(obj.timer);

    obj.timer = setInterval(function() {
        // 用来存标记
        var array = [];
        // 开始设都没有达到目标点
        var flag = false;
        for (var attr in jsonObj) {
            // 获取当前值
            if (attr == 'opacity') {
                // 因为opacity是小数，所以用 parseFloat
                // 用parseFloat之后会出现，52.00000000000001的情况，所以要加上Math.round
                // 这里很奇怪 parseInt(parseFloat(getStyle(obj, attr) * 100));在谷歌里面不兼容
                // 其他浏览器都得到了很好的兼容
                var curr = Math.round(parseFloat(getStyle(obj, attr) * 100));

            } else {
                var curr = parseInt(getStyle(obj, attr));
            };


            // 求速度 
            var speed = (jsonObj[attr] - curr) / 6;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);


            if (attr == 'opacity') {
                obj.style.opacity = (curr + speed) / 100;
                obj.style.filter = 'alpha(opacity=' + (curr + speed) + ')';
            } else {
                obj.style[attr] = (curr + speed) + 'px';
            };

            // 检测停止 
            if (jsonObj[attr] == curr) {
                flag = true;
            } else {
                flag = false;
            }


            array.push(flag);

        };

        // console.log(array);

        for (var i = 0, len = array.length; i < len; i++) {
            // 在这个数组里面只要有一个false就把标记flag设为false
            if (array[i] == false) {
                flag = false;
            }
        }

        // 清除定时器
        if (flag) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }

        // console.log('width' + ": " + parseInt(getStyle(obj, 'width')));
        // console.log('height' + ": " + parseInt(getStyle(obj, 'height')));
        console.log('opacity' + ": " + Math.round(parseFloat(getStyle(obj, 'opacity') * 100)));
        // console.log('fontSize' + ": " + parseInt(getStyle(obj, 'fontSize')));
    }, 30);
}



function uniformMove(obj, json, speed, fn) {
    // 速度
    // var speed = speed;

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = false;
        var array = [];
        for (var attr in json) {
            // 取值
            if (attr == 'opacity') {
                var curr = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                var curr = parseInt(getStyle(obj, attr));
            }

            // 当最后一次的运动不足用来加speed的时候，直接运动到结束
            if (Math.abs(json[attr] - curr) < Math.abs(speed)) {
                if (attr == 'opacity') {
                    obj.style.opacity = json[attr] / 100;
                    obj.style.filter = 'alpha(opacity=' + json[attr] + ')';
                } else {
                    obj.style[attr] = json[attr] + 'px';
                };
            } else {
                if (attr == 'opacity') {
                    obj.style.opacity = (curr + speed) / 100;
                    obj.style.filter = 'alpha(opacity=' + (curr + speed) + ')';
                } else {
                    obj.style[attr] = (curr + speed) + 'px';
                };
            };


            if (curr == json[attr]) {
                flag = true;
            } else {
                flag = false;
            };

            array.push(flag);

        };

        // 检测停止
        for (var i = 0, len = array.length; i < len; i++) {
            if (array[i] == false) {
                flag = false;
            }
        };

        if (flag == true) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        };
        // console.log('width' + ": " + parseInt(getStyle(obj, 'width')));
        // console.log('height' + ": " + parseInt(getStyle(obj, 'height')));
        // console.log('opacity' + ": " + Math.round(parseFloat(getStyle(obj, 'opacity') * 100)));
        // console.log('fontSize' + ": " + parseInt(getStyle(obj, 'fontSize')));
        console.log(parseFloat(getStyle(obj, 'opacity')));
    }, 30);

}
qiangD
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS运动特效之完美运动框架实例分析
10-18
本篇文章将探讨“JS运动特效之完美运动框架实例分析”，着重讲解如何处理元素运动中的属性检测与判断，以确保所有设定的运动都能正确完成。 在JavaScript中，我们通常使用定时器（`setInterval`）来实现动画效果，...
JavaScript运动框架 链式运动到完美运动（五）
10-19
本篇文章主要探讨的是JavaScript运动框架中的一个重要概念——链式运动，以及如何将其运用到完美运动中。 链式运动是指在一个动画完成之后无缝衔接另一个动画，形成连续的视觉效果。这种技术常见于网站设计中，例如...
JavaScript完美运动框架
08-01
今天，我们将探索一个名为「JavaScript 完美运动框架」的解决方案，该框架可以实现多个属性的同时运动，例如宽度、高度、透明度等。 获取当前元素的行间样式或者外部样式 在开始运动之前，我们需要获取当前元素的...
Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new nod
热门推荐
qiangD的博客
12-16 2万+
insertBefore插入节点出错Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node 插入的节点不是插入在，子节点之前！ insertBefore() 方法
如何批量添加阿里巴巴图标 iconfont
qiangD的博客
03-03 4932
(1) 如何批量添加阿里巴巴图标 iconfont 打开控制台 输入如下代码，其实就是触发点击事件，可以一次性选择当前页面所有的图标 var span = document.querySelectorAll('.icon-cover'); for (var i = 0, len = span.length; i < len; i++) { console.log(span[i].query
第二种 复选框的写法
qiangD的博客
07-21 1415
<form method="post" action=""> 你爱好的运动是？ <input type="checkbox" id="CheckedAll" />全选/全不选 <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="ch
javascript 闭包获取当前元素的索引
qiangD的博客
02-10 1355
html部分<button>button1</button> <button>button2</button> <button>button3</button> <button>button4</button>javascript 部分var btns = document.querySelectorAll('button'); var len = btns.length;for (i = 0; i
javascript运动框架---2--缓冲运动
qiangD的博客
08-04 484
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: red;
全选，不选，输出选中的值
qiangD的博客
07-21 478
<form method="post" action=""> 你爱好的运动是？ <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type
javascript运动框架---1
qiangD的博客
08-04 477
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } div { width: 50px; height: 50px; background: red;
javascript运动框架多物体运动---1
qiangD的博客
08-04 475
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } textarea { position: fixed; right: 0; top: 50px;
javascript个人代码备份2015-07-29
qiangD的博客
07-29 459
function $(id) { return document.getElementById(id); }/** * [clientCheck 客户端检测] * @return {[type]} [description] */ function clientCheck() { //rendering engines var engine = { ie
全选，反选，取消
qiangD的博客
07-23 457
return { checkAll: function() { $(':checkbox').prop('checked', true); }, notCheck: function() { $(':checkbox').prop('checked', false); }, reverseCheck: funct
javascript运动框架---3--匀速运动
qiangD的博客
08-04 446
<head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: red;
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 332
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
最新发布
qq_42072014的博客
08-11 285
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
S2SH框架详解：Spring-Struts2-Hibernate集成项目开发
4. **Dwr（可选）**：一个JavaScript框架，用于服务器到浏览器的异步通信。 5. **分页框架（可选）**：增强数据分页功能，提高用户体验。 6. **Junit测试（可选）**：用于编写单元测试，保证代码质量。 7. **MySQL...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值