jquery实现以原点为中心圆线上都是div圆
来源:互联网 发布:侠客风云传mod数据 编辑:程序博客网 时间:2024/05/17 01:09
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>圆形周围被圆包围</title><script type="text/javascript" src="jquery-1.5.1.min.js"></script><script type="text/javascript">$(function(){//中心点横坐标var dotLeft = ($(".container").width()-$(".dot").width())/2;//中心点纵坐标var dotTop = ($(".container").height()-$(".dot").height())/2;//起始角度var stard = 0;//半径var radius = 300;//每一个BOX对应的角度;var avd = 360/$(".box").length;//每一个BOX对应的弧度;var ahd = avd*Math.PI/180;//设置圆的中心点的位置$(".dot").css({"left":dotLeft,"top":dotTop});$(".box").each(function(index, element){ $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop}); });})</script><style type="text/css">*{margin:0;padding:0;}.container{position:relative;width:700px;height:800px; margin:0 auto; border:1px solid #F00;}.box{position:absolute;width:60px;height:60px;background:#000; border-radius:50%;color: #fff;text-align: center;}.dot{ position:absolute;width:100px;height:100px;background:#F00;}p{word-break:break-word;}</style></head><body><div class="container"><div class="dot">eeeee</div><div class="box">eeeee</div><div class="box">eeeee</div><div class="box"><p>eefafafeeffffe</p></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></body></html>
效果图:
0 0
- jquery实现以原点为中心圆线上都是div圆
- 笔记:css3 transition 实现div宽度以中心为原点向两边伸长
- 图像旋转之以原点为中心
- 鼠标移上去以中心为原点慢慢出现
- MFC+Direct2D以屏幕中心为中心缩放的实现
- 现有一块草坪,长为20米,宽为2米,要在横中心线上放置半径为Ri的喷水装置,每个喷水装置的效果都会让以它为中心的半径为实数Ri(0<Ri<15)的圆被湿润,这有充足的喷水装置i(1<i<600)个,并
- 以自我为中心
- 以客户为中心
- 使用MMDrawerController以TabBarController为中心视图实现抽屉效果
- 如何实现一个以中国为中心的世界地图
- 从以主机为中心到以内容为中心
- 深思“以客户为中心”
- 流程以客户为中心
- 百度地图系列06——以定位点为中心自定义画圆
- JQuery给DIV 实现target 为_blank
- Linux 将不以 pc 为中心
- 关于XML:以对象模型为中心
- 构建以数据为中心的应用程序
- Editplus使用技巧集萃
- 【POJ 2524 Ubiquitous Religions】+ 并查集
- java微信公众号支付相关说明
- Android透明背景Dialog、Dialog实现悬浮窗口 可与输入法交互,不被输入法覆盖
- 腾讯好文!配色新人应该学会的6个色彩知识点
- jquery实现以原点为中心圆线上都是div圆
- Genymotion Error: Unable to load Virtualbox engine
- 图标网址
- 通过Bundle传递不同Intent之间的原始数据
- python爬取静态和动态网页
- 【云知道】春运火车票手速大比拼
- (c++)题目描述 求方程 的根,用三个函数分别求当b^2-4ac大于0、等于0、和小于0时的根,并输出结果。从主函数输入a、b、c的值。
- C++智能指针的理解与实现
- css3弹出框淡入淡出4种动画