javascript 如何实现让一个div宽高（width height）同时变化？
0
最佳答案
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
其他回答(7)
0
简单点，一个setInterval，然后监视宽度变化，遇到变化就更新height。
求代码？!!!
还有，我的意思是：它可能只变高或者只变宽或者一起都要变，这种效果
@前端爱好者: 这个就对应三种不同的算法而已。写三个分支就行。
0
我觉得楼主没有说清楚，想要什么情况下高度宽度发生变化....
情况有很多：
点击某个按钮！
文本内容多，自动改变！
不同情况，处理方法不同：
不过基本思路就是一楼的方法，通过js去设置style的高度宽度。
0
width:auto;
height:auto;
你这回答太不负责了，楼主明明说了是“宽变到300px的同时它的高变到200px”，你这auto能行？
@xingoo: 好吧。。。
@楼主
你可以使用
@media screen and (min-width:300px)
{
#Id{
width:300px;
height:200px;
}
}
0
一楼正解
0
$("#id").hover(function(){
$(this).height=$(this).width*(2/3);
});
0
一楼都是个好的了
0
如果是CSS3的话，用CSS动画来做吧，简直不要太轻松加愉快。
