JS基础-特效篇-JS设置CSS样式值01

最新推荐文章于 2021-12-28 16:45:24 发布

「已注销」

最新推荐文章于 2021-12-28 16:45:24 发布

阅读量160

点赞数

分类专栏： JS学习笔记（个人）

本文链接：https://blog.csdn.net/weixin_45799003/article/details/116662760

版权

JS学习笔记（个人）专栏收录该内容

92 篇文章 1 订阅

订阅专栏

1.页面：

<button id="btn">向左走</button>
<button id="btn1">向右走</button>
<div id="box"></div>
<script src="MyTool/MyTool.js"></script>

2.样式：

<style>
    * {
        margin: 0;
        padding: 0;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: red;

        position: absolute;
    }
</style>

3.JS封装的函数

    /*
    *@description:[改变标签的css属性]
    *@param:{String}[attr]
    *@param:{String|Number}[value]
    *@date:2021/5/11
    */
    function changeCssStyle(eleObj, attr, value) {
        eleObj.style[attr] = value;
    }

    /*
    *@description:[缓动动画函数]
    *@param:{Object}[eleObj]
    *@parem:{Number}[target]
    *@date:2021/5/11
    */
    function buffer(eleObj, target) {
        eleObj.setAttribute('timer', 'null');
        clearInterval(eleObj.timer);
        var speed = 0;
        eleObj.timer = setInterval(function () {
            speed = (target - eleObj.offsetLeft) * 0.2;
            speed = (target > eleObj.offsetLeft) ? Math.ceil(speed) : Math.floor(speed);
            eleObj.style.left = box.offsetLeft + speed + 'px';
            if (eleObj.offsetLeft === target) {
                clearInterval(eleObj.timer);
            }
        }, 20)
    }

4.应用

window.addEventListener('load', function (ev) {
        var box = myTool.$('box');
        myTool.$('btn').addEventListener('click', function (ev1) {
            buffer(box, 800);
            changeCssStyle(box,'background','green');
        });
        myTool.$('btn1').addEventListener('click', function (ev1) {
            buffer(box, 200);
        });
    });