js(任意值框架)使物体改变高、宽、透明度、字体等

一、创建一个框架，为物体设置不同的属性，使物体改变。

例如：使物体变宽、变高、字体变大、边框变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 10px;
            border: 5px solid blue;
            float: left;
        }

    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            oDiv1.onmouseover = function () {
                startMove(this,'height',400);
            };
            oDiv1.onmouseout = function () {
                startMove(this,'height',200);
            };
            var oDiv2 = document.getElementById('div2');
            oDiv2.onmouseover = function () {
                startMove(this,'width',400);
            };
            oDiv2.onmouseout = function () {
                startMove(this,'width',200);
            };
            var oDiv3 = document.getElementById('div3');
            oDiv3.onmouseover = function () {
                startMove(this,'fontSize',40);
            };
            oDiv3.onmouseout = function () {
                startMove(this,'fontSize',20);
            };
            var oDiv4 = document.getElementById('div4');
            oDiv4.onmouseover = function () {
                startMove(this,'borderWidth',100);
            };
            oDiv4.onmouseout = function () {
                startMove(this,'borderWidth',10);
            };

        };
        //getStyle()方法是获取css非行间样式，为了兼容做了判断
        //不使用offsetHeight、offsetWidth，是因为div加边框后此属性不能正常展示,不加边框可以使用
        function getStyle(obj,name) {
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,attr,target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var curr = parseInt(getStyle(obj,attr));
                var speed = (target-curr)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(curr == target){
                    clearInterval(obj.timer);
                }else {
                    obj.style[attr] = curr+speed+'px';
                }
            },30);
        }

    </script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">改变字体</div>
<div id="div4">改变边框</div>

</body>
</html>

 二、以上框架，还有一个问题，不能设置透明度，为了进一步完善可以添加判断。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: red;
            margin: 10px;
            border: 5px solid blue;
            float: left;
        }
        #div5{
            filter: alpha(opacity:0.3);
            opacity: 0.3;
        }

    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            oDiv1.onmouseover = function () {
                startMove(this,'height',400);
            };
            oDiv1.onmouseout = function () {
                startMove(this,'height',200);
            };
            var oDiv2 = document.getElementById('div2');
            oDiv2.onmouseover = function () {
                startMove(this,'width',400);
            };
            oDiv2.onmouseout = function () {
                startMove(this,'width',200);
            };
            var oDiv3 = document.getElementById('div3');
            oDiv3.onmouseover = function () {
                startMove(this,'fontSize',40);
            };
            oDiv3.onmouseout = function () {
                startMove(this,'fontSize',20);
            };
            var oDiv4 = document.getElementById('div4');
            oDiv4.onmouseover = function () {
                startMove(this,'borderWidth',100);
            };
            oDiv4.onmouseout = function () {
                startMove(this,'borderWidth',10);
            };
            var oDiv5 = document.getElementById('div5');
            oDiv5.onmouseover = function () {
                startMove(this,'opacity',100);
            };
            oDiv5.onmouseout = function () {
                startMove(this,'opacity',30);
            };

        };
        //getStyle()方法是获取css非行间样式，为了兼容做了判断
        //不使用offsetHeight、offsetWidth，是因为div加边框后此属性不能正常展示,不加边框可以使用
        function getStyle(obj,name) {
            if(obj.currentStyle){
                return obj.currentStyle[name];
            }else{
                return getComputedStyle(obj,false)[name];
            }
        }

        function startMove(obj,attr,target) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var curr = 0;
                if(attr == 'opacity'){//针对透明度
                    curr =Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                    curr = parseInt(getStyle(obj,attr));
                }
                var speed = (target-curr)/6;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                if(curr == target){
                    clearInterval(obj.timer);
                }else {
                    if(attr == 'opacity'){
                       obj.style.filter = 'alpha(opacity:'+(curr+speed)+ ')';
                        obj.style.opacity = (curr+speed)/100;
                    }else {
                        obj.style[attr] = curr+speed+'px';
                    }
                }
            },30);
        }

    </script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">改变字体</div>
<div id="div4">改变边框</div>
<div id="div5">改变透明度</div>

</body>
</html>

 

posted on 2017-05-12 14:45  懂你在爱我  阅读(213)  评论(0)    收藏  举报

导航