zoukankan      html  css  js  c++  java
  • 封装函数通过输入(元素,属性,目标值)改变div样式

    ## 假设一个div样式如下
    ```html
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }

    div {
    100px;
    height: 100px;
    background-color: red;
    left: 0;
    top: 0;
    position: absolute;
    opacity: 1;
    }
    </style>
    </head>

    <body>
    <div></div>
    <script src="./animation.js"></script>
    <script>
    var div = document.querySelector('div');
    // animate(div, 'width', 500);
    // animate(div, 'opacity', 50);
    animate(div, {
    200,
    left: 500,
    opacity: 50
    });
    </script>
    </body>

    </html>
    ```

    ## 只针对于单个样式


    ```javascript
    function getstyle(el, property) {
    if (getComputedStyle) {
    return getComputedStyle(el)[property]
    } else {
    return el.currentstyle[property];
    }
    }


    function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
    clearInterval(el.timerId)
    el.timerId = setInterval(function() {
    for (var property in properties) {
    var current;
    var target = properties[property];
    if (property === 'opacity') {
    current = Math.round(parseFloat(getstyle(el, 'opacity')) * 100)
    } else {
    current = parseInt(getstyle(el, property))
    }
    var speed = (target - current) / 30;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (property === 'opacity') {
    el.style.opacity = ((current + speed) / 100)
    } else {
    el.style[property] = (current + speed) + 'px';
    }
    }
    }, 10)
    }
    ```

    ## 针对多个样式
    ```javascript
    function getstyle(el, property) {
    if (getComputedStyle) {
    return getComputedStyle(el)[property]
    } else {
    return el.currentstyle[property];
    }
    }


    function animate(el, properties) { //el:元素;properties{property:属性;target:目标};
    clearInterval(el.timerId)
    el.timerId = setInterval(function() {
    for (var property in properties) {
    var current;
    var target = properties[property];
    if (property === 'opacity') {
    current = Math.round(parseFloat(getstyle(el, 'opacity')) * 100)
    } else {
    current = parseInt(getstyle(el, property))
    }
    var speed = (target - current) / 30;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (property === 'opacity') {
    el.style.opacity = ((current + speed) / 100)
    } else {
    el.style[property] = (current + speed) + 'px';
    }
    }
    }, 10)
    }
    ```

  • 相关阅读:
    Metasploit自动攻击和选择模块攻击详解
    laravel 通过ftp上传的时候报错 Use of undefined constant FTP_BINARY
    Laravel--文件管理及上传自定义目录及文件名
    在从myql服务器上 取消主从关系和重新构建主从关系
    sql 从服务器取消主从复制
    pecl和pear 的区别和联系
    laravel中打印一个sql语句
    laravel 查询数据库first()返回的数据转数组
    [微信小程序]实现一个自定义遮罩层
    分享CSS3里box-shadow属性的使用方法,包括内阴影box-shadow:inset
  • 原文地址:https://www.cnblogs.com/lilansheng/p/11621247.html
Copyright © 2011-2022 走看看