如何用js动态改变圆的半径
日期：2014-05-16 浏览次数：20537 次
怎么用js动态改变圆的半径
<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;
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"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
</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;
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"></div>
<div class="circle1"></div>
<div class="circle4"></div>
<div class="circle2"></div>
</body>
</html>
圆已经生成了
------解决方案--------------------
- HTML code
<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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
