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

FreezingCoffin 2012-06-08 06:20:14
<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>


圆已经生成了
...全文
347 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
drbushi 2012-06-09
  • 打赏
  • 举报
 回复
这个好累呀，没什么作用吧
001007009 2012-06-08
  • 打赏
  • 举报
 回复
一般就根据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>
FreezingCoffin 2012-06-08
  • 打赏
  • 举报
 回复
不是从小到大还原原来的大小 在原来的基础上 扩大这些圆 还有不要用延时
001007009 2012-06-08
  • 打赏
  • 举报
 回复
那就动态改变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>

FreezingCoffin 2012-06-08
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 的回复:]

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 ……
[/Quote]

不好意思 可能我没表达清楚
效果是 让这些圆变大 改变他们的半径
不知道我这圆做的对不对 是用padding控制半径
001007009 2012-06-08
  • 打赏
  • 举报
 回复 


<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>



楼主 这个意思？
FreezingCoffin 2012-06-08
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 的回复:]

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 ……
[/Quote]

不是圆了 带圆角的正方形了
001007009 2012-06-08
  • 打赏
  • 举报
 回复 


<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>


试试
基于javascript实现按圆形排列DIV元素(二)
一、原理分析 　　1.1怎么才能让DIV元素动起来？ 　　动起来的实质，就是改变DIV的位置，也就是改变其left和top值; 　　2.2怎么上DIV元素动起来的时候，是在规定的圆周上面？ 　　通过上一次的分析，让DIV按圆形排队，我们知道了，如要让DIV定位在圆周上面，主要是根据角度(弧度)来实现的。 　　看下图: 上图中，我们B元素和C元素的定位是如何实现的？根据上一次讲的公式,如下： (index:元素的索引值，radius半径，dotLeft：圆心的横坐标，dotTop：圆心的纵坐标) B的left = Math.sin((ahd*Bindex))*radius+dotLeft B
javascript设计模式 – 装饰模式原理与应用实例分析
本文实例讲述了javascript设计模式 – 装饰模式原理与应用。分享给大家供大家参考，具体如下： 介绍：装饰模式可以在不改变一个对象本身功能的基础上给对象增加额外的新行为。在现实生活中，这种情况也到处存在，例如一张照片，可以不改变照片本身，通过增加一个相框，使其具有防潮的功能。装饰模式是一种用于替代继承的技术，它使用对象之间的关联关系来取代继承关系。 定义：动态的给一个对象增加一些额外的职责，就增加对象功能来说，装饰模式比生成子类实现更为灵活。装饰模式是一种对象结构模型。 场景：我们现有一个Circle类用来画一个圆，新的需求要求画一个红色的圆，又一个新的需求要求我们画一个半径20的圆，又
crazy-cycloid-anim:使用p5.js制作的动画
摆线动画 这是动画的链接： : 该动画在p5js上运行。 我在数学课上摆线摆线图一团糟，想到了一个动画的想法。 每帧绘制两个圆的“外摆线”。 该图在外圆上围绕内圆的外部滚动时在外圆上绘制点的路径。 我通过在其上采样点并在每对相邻点之间绘制线来绘制此图。 每帧，我增加外圆的半径，因为两个半径的比率对于图形的形状非常重要。 使得这一点与众不同的是，改变细节级别（又称图形上采样的点数）会在同一动画上产生完全不同的令人满意的变化。 它们每个都遵循截然不同的路径，但是它们都具有特殊的对称性。 左上方的滑块控制此详细程度。
jquery.nicescroll-master
1. 引用 jquery.js 和 jquery.nicescroll.js 1 2 [removed][removed] [removed][removed] 2. 通过 jquery 获取需要添加滚动条的元素，调用 niceScroll 函数进行配置即可使用该插件，如下 1 2 3 4 5 6 7 8 9 $('#content').niceScroll({ cursorcolor: "#ccc",//#CC0071 光标颜色 cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0 touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备 cursorwidth: "5px", //像素光标的宽度 cursorborder: "0", // 游标边框css定义 cursorborderradius: "5px",//以像素为光标边界半径 autohidemode: false //是否隐藏滚动条 });
lensbrush:d3.js 刷镜头插件
镜头刷 Lensbrush 是一个简单的 d3 插件，它允许您根据镜头进行选择。 您可以像 d3.svg.brush 一样启动镜头刷： var brush = d3 . svg . lensbrush ( ) ; 请注意，extent 方法返回一个包含三个值的数组： 镜头的中心 x 值 镜头的中心 y 值 半径 brush . extent ( ) ; 为了测试特定点是否位于镜头内，您可以使用以下方法，该方法需要 x 和 y 值： if ( brush . isWithinLens ( x , y ) ) { console . log ( “Within the lens : ( ” , x , y , “ ) ” ) ; } 用法 创建一个新镜头：按住鼠标左键。 移动鼠标将改变镜头的半径。 释放鼠标按钮以结束您的选择。 重新定位镜头：拖放镜头。 调整镜头大小：将鼠
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章