首页 新闻 搜索 专区 学院

javascript 如何实现让一个div宽高(width height)同时变化?

0
悬赏园豆:50 [已解决问题] 解决于 2016-01-01 11:04

  比如一个div设置它的宽高都是100px;如何让它的宽变到300px的同时它的高变到200px;

希望有大神能给答。

PS:最好能附上完整代码!!!

 

二次修改:好吧,是我没有说清楚。要慢慢变到300px(setInterval),它的宽高变化代码好像是这样写的:{width:300,height:200},最好用原生JS。求解!!!

前端爱好者的主页 前端爱好者 | 初学一级 | 园豆:78
提问于:2015-12-28 21:49
< >
分享
最佳答案
1

我还是先帮楼主把你想要实现的功能表述一下吧,免得大家看来看去还不明白楼主在问什么。

用原生js实现以下功能:

对于一个div,任意给定一个新的尺寸{width:x,height:y},让div从当前尺寸渐变到这个新尺寸(相当于一个动画效果),要求width和height尽量按比例同步渐变。

以下是我的代码:

<!DOCTYPE html>
<html>
<body>
    <span>目标宽度:</span><input id='id_width' type='input' value='300'/></br>
    <span>目标高度:</span><input id='id_height' type='input' value='200'/></br>
    <input id='id_BtnEnlarge' type='button' value='DIV尺寸渐变' style="margin-bottom:10px;"/>
    <div id='id_DivTest' style='width:100px;height:100px;background-color:red;overflow:hidden;'></div>

    <script type="text/javascript">
        function enlargeDiv (size) {
            var div = document.getElementById('id_DivTest');
            var step = 2; //定义单次尺寸变化量
            
            //计算当前尺寸和目标尺寸的差
            var wDiff = size.width - parseInt(div.style.width);
            var hDiff = size.height - parseInt(div.style.height);

            //记录尺寸变化方向
            var wDirec = wDiff > 0 ? 1 : -1;
            var hDirec = hDiff > 0 ? 1 : -1;
            
            wDiff = Math.abs(wDiff);
            hDiff = Math.abs(hDiff);
            
            //计算本次尺寸变化量
            var wAdd, hAdd;
            
            if (wDiff == 0) {
                wAdd = 0;
                hAdd = step < hDiff ? step : hDiff;
            }
            else if (hDiff == 0) {
                hAdd = 0;
                wAdd = step < wDiff ? step : wDiff;
            }
            else if (wDiff > hDiff) {
                wAdd = step < wDiff ? step : wDiff;
                hAdd = Math.floor(wAdd*hDiff/wDiff);
    
                if(wAdd == wDiff) hAdd = hDiff;
            }
            else {
                hAdd = step < hDiff ? step : hDiff;
                wAdd = Math.floor(hAdd*wDiff/hDiff);
                
                if(hAdd == hDiff) wAdd = wDiff;    
            }
            
            div.style.width = parseInt(div.style.width) + wAdd*wDirec + "px";
            div.style.height = parseInt(div.style.height) + hAdd*hDirec + "px";
            
            if(wAdd == wDiff && hAdd == hDiff) div.enlargeTimer = clearInterval(div.enlargeTimer);
                
        }
    
        document.getElementById('id_BtnEnlarge').onclick = function() {
            var w = parseInt(document.getElementById('id_width').value);
            var h = parseInt(document.getElementById('id_height').value);
            
            if(w >= 0 && h >= 0) {
                var size = {width:w, height:h};
                var div = document.getElementById('id_DivTest');
                
                if(div.enlargeTimer) return; //防止重复点击产生多个渐变过程
                div.enlargeTimer = setInterval(function(){enlargeDiv(size);}, 30);
            }
            
        };
            
        
    </script>
</body>
</html>

收获园豆:50
脚本王子 | 小虾三级 |园豆:779 | 2015-12-30 23:24
其他回答(7)
0

简单点,一个setInterval,然后监视宽度变化,遇到变化就更新height。

幻天芒 | 园豆:36594 (高人七级) | 2015-12-29 08:43

求代码?!!!

还有,我的意思是:它可能只变高或者只变宽或者一起都要变,这种效果

支持(0) 反对(0) 前端爱好者 | 园豆:78 (初学一级) | 2015-12-30 10:36

@前端爱好者: 这个就对应三种不同的算法而已。写三个分支就行。

支持(0) 反对(0) 幻天芒 | 园豆:36594 (高人七级) | 2015-12-30 15:08
0

我觉得楼主没有说清楚,想要什么情况下高度宽度发生变化....

情况有很多:

点击某个按钮!

文本内容多,自动改变!

不同情况,处理方法不同:

不过基本思路就是一楼的方法,通过js去设置style的高度宽度。

xingoo | 园豆:711 (小虾三级) | 2015-12-29 09:06
0

width:auto;

height:auto;

Supper_litt | 园豆:981 (小虾三级) | 2015-12-29 09:08

你这回答太不负责了,楼主明明说了是“宽变到300px的同时它的高变到200px”,你这auto能行?

支持(0) 反对(0) xingoo | 园豆:711 (小虾三级) | 2015-12-29 09:33

@xingoo: 好吧。。。

@楼主

你可以使用

@media screen and (min-width:300px)

{

    #Id{

  width:300px;

      height:200px;

   }

}

支持(0) 反对(0) Supper_litt | 园豆:981 (小虾三级) | 2015-12-29 09:46
0

一楼正解

W宁宁 | 园豆:522 (小虾三级) | 2015-12-29 13:41
0

$("#id").hover(function(){

  $(this).height=$(this).width*(2/3);

});

猿进化 | 园豆:174 (初学一级) | 2015-12-30 08:59
0

一楼都是个好的了

搁忆 | 园豆:600 (小虾三级) | 2015-12-30 12:27
0

如果是CSS3的话,用CSS动画来做吧,简直不要太轻松加愉快。

_龙猫 | 园豆:240 (菜鸟二级) | 2016-01-05 12:45
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册