怎么用js动态改变圆的半径

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<style type="text/css">
.circle {
background: #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:60px;
position: absolute;
margin-left:50px;
left: 242px;
top: 188px;
}
.circle1 {
background: #306;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:45px;
position: absolute;
left: 135px;
top: 136px;
}
.circle2 {
background: #C33;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:50px;
position: absolute;
left: 400px;
top: 135px;
}
.circle3 {
background: #0F0;
-moz-border-radius: 78.5px;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:42px;
position: absolute;
left: 232px;
top: 75px;
}
.circle4 {
background: #36F;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:63px;
position: absolute;
left: 201px;
top: 247px;
}
</style>
</head><body>
<div class="circle"></div>
<div class="circle3" id="test"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
<script type="text/javascript">
var obj = document.getElementById('test');
obj.style.borderRadius = '20px'; // w3c
obj.style.MozBorderRadius = '20px'; // mozilla
</script>
</body>
</html>试试
<style type="text/css">
.circle {
background: #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:60px;
position: absolute;
margin-left:50px;
left: 242px;
top: 188px;
}
.circle1 {
background: #306;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:45px;
position: absolute;
left: 135px;
top: 136px;
}
.circle2 {
background: #C33;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:50px;
position: absolute;
left: 400px;
top: 135px;
}
.circle3 {
background: #0F0;
padding:42px;
position: absolute;
left: 232px;
top: 75px;
}
.circle4 {
background: #36F;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:63px;
position: absolute;
left: 201px;
top: 247px;
}
</style>
</head><body>
<div class="circle"></div>
<div class="circle3" id="test"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
<script type="text/javascript">
    var obj = document.getElementById('test');
var t = 100;
var i = 0;
var timer = setInterval(function(){
if( t ){
obj.style.borderRadius = i+'px'; // w3c
obj.style.MozBorderRadius = i+'px'; // mozilla
t--;
i++
//console.log(i)
}else{
clearInterval(timer);
}
}, 30)
</script>
</body>
</html>楼主这个意思？
不好意思  可能我没表达清楚
效果是    让这些圆变大   改变他们的半径
不知道我这圆做的对不对  是用padding控制半径
那就动态改变padding值
<style type="text/css">
.circle {
background: #FF3300;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:60px;
position: absolute;
margin-left:50px;
left: 242px;
top: 188px;
}
.circle1 {
background: #306;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:45px;
position: absolute;
left: 135px;
top: 136px;
}
.circle2 {
background: #C33;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:50px;
position: absolute;
left: 400px;
top: 135px;
}
.circle3 {
background: #0F0;
padding:42px;
border-radius: 78.5px 78.5px 78.5px 78.5px;
-moz-border-radius: 78.5px 78.5px 78.5px 78.5px;
position: absolute;
left: 232px;
top: 75px;
}
.circle4 {
background: #36F;
border-radius: 78.5px 78.5px 78.5px 78.5px;
padding:63px;
position: absolute;
left: 201px;
top: 247px;
}
</style>
</head><body>
<div class="circle"></div>
<div class="circle3" id="test"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
<script type="text/javascript">
    var obj = document.getElementById('test');
    var t = 40;
    var i = 0;
    var timer = setInterval(function(){
        if( t ){
                obj.style.padding = i + 'px'
            t--;
            i++
            //console.log(i)
        }else{
            clearInterval(timer);
        }
    }, 30)
</script>
</body>
</html>
一般就根据width 和 height来做，没用padding。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
div {
width:100px; height:100px;
background:#ddd;
-moz-border-radius:50px;
}
.a {
width:100px; height:100px;
background:#ddd;
-moz-border-radius:40px;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="a"></div>
</body>
</html>