JS任意值的运动框架

leigangg

于 2020-04-04 23:29:29 发布

阅读量111

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/leigangg/article/details/105320054

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

任意值的运动框架包括宽,高,字体大小,边框.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: #f0f;
            float: left;
            margin: 50px;
            font-size: 16px;
            border: 10px solid #000;
        }
     
    </style>
</head>
<body>
    <div id="div1">变高</div>
    <div id="div2">变宽</div>
    <div id="div3">font-size变大</div>
    <div id="div4">border 变大</div>

    <script>
        //变高
        var div1 = document.getElementById('div1');
            div1.onmouseover = function(){
                startMove(this, 'height', 400);
            };
            div1.onmouseout = function(){
                startMove(this, 'height', 200);
            };
        //变宽
        var div2 = document.getElementById('div2');
            div2.onmouseover = function(){
                startMove(this, 'width', 400);
            };
            div2.onmouseout = function(){
                startMove(this, 'width', 200);
            };
        //文字类容变大
        var div3 = document.getElementById('div3');
            div3.onmouseover = function(){
                startMove(this, 'font-size', 60);
            };
            div3.onmouseout = function(){
                startMove(this, 'font-size', 16);
            };
        //border-width变大
        var div4 = document.getElementById('div4');
            div4.onmouseover = function(){
                startMove(this, 'border-width', 60);
            };
            div4.onmouseout = function(){
                startMove(this, 'border-width', 10);
            };
        // 这样我们不管在不在行间我们都能拿到样式
        function getStyle(obj, name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj, false)[name];
            };
        };
        function startMove(obj, cansu, iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){

                var cur = parseInt(getStyle(obj,cansu));

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    obj.style[cansu] = cur+speed+'px';
                };
            }, 30);
        };
        
    </script>
</body>
</html>

如果需要改变透明度 ,那么还需要一些修改:

透明度的值都是零点几,而我们的parseInt只能会自动的不全,也就是或最小值都为1或者,还有就是透明度的是没有px 的这个也需要修改

在这里插入图片描述

完整的运动框架:(前提:不需要兼容IE7)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: #f00;
            filter: alpha(opacity=30);
            opacity:0.3;
            margin: 10px;
            float: left;
        }
     
    </style>
</head>
<body>
    <div id="div1">淡入淡出</div>
    <div id="div2">变宽</div>

    <script>
        //淡入淡出
        var div1 = document.getElementById('div1');
            div1.onmouseover = function(){
                startMove(this, 'opacity', 100);
            };
            div1.onmouseout = function(){
                startMove(this, 'opacity', 30);
            };
            //变宽
            var div2 = document.getElementById('div2');
            div2.onmouseover = function(){
                startMove(this, 'width', 600);
            };
            div2.onmouseout = function(){
                startMove(this, 'width', 300);
            };
        // 这样我们不管在不在行间我们都能拿到样式
        function getStyle(obj, name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj, false)[name];
            };
        };
        function startMove(obj, cansu, iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var cur = 0;
                if(cansu =='opacity'){
                    cur = parseFloat(getStyle(obj, cansu))*100;
                }else{
                    cur = parseInt(getStyle(obj, cansu));
                };
                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(cansu == 'opacity'){
                        obj.style.filter = 'alpha(opacity:"+(cur+speed)+")';
                        obj.style.opacity = (cur+speed)/100;
                        console.log(obj.style.opacity);
                        
                    }else{
                        obj.style[cansu] = cur+speed+'px';
                    }
                };
            }, 30);
        };
        
    </script>
</body>
</html>

如果是需要兼容IE7 那么我们还需要取整:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: #f00;
            filter: alpha(opacity=30);
            opacity:0.3;
            margin: 10px;
            float: left;
        }
     
    </style>
</head>
<body>
    <div id="div1">淡入淡出</div>
    <div id="div2">变宽</div>

    <script>
        //淡入淡出
        var div1 = document.getElementById('div1');
            div1.onmouseover = function(){
                startMove(this, 'opacity', 100);
            };
            div1.onmouseout = function(){
                startMove(this, 'opacity', 30);
            };
            //变宽
            var div2 = document.getElementById('div2');
            div2.onmouseover = function(){
                startMove(this, 'width', 600);
            };
            div2.onmouseout = function(){
                startMove(this, 'width', 300);
            };
        // 这样我们不管在不在行间我们都能拿到样式
        function getStyle(obj, name){
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj, false)[name];
            };
        };
        function startMove(obj, cansu, iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
                var cur = 0;
                if(cansu =='opacity'){
                    cur = Math.round(parseFloat(getStyle(obj, cansu))*100);
                }else{
                    cur = parseInt(getStyle(obj, cansu));
                };
                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if(cur==iTarget){
                    clearInterval(obj.timer);
                }else{
                    if(cansu == 'opacity'){
                        obj.style.filter = 'alpha(opacity:"+(cur+speed)+")';
                        obj.style.opacity = (cur+speed)/100;
                        console.log(obj.style.opacity);
                        
                    }else{
                        obj.style[cansu] = cur+speed+'px';
                    }
                };
            }, 30);
        };
        
    </script>
</body>
</html>

修改了这里:
在这里插入图片描述

leigangg

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS任意值的运动框架

任意值的运动框架包括宽,高,字体大小,边框.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫