-3
A
回答
0
像这样的事情?
要计算一个圆上的一个点,你可以使用:
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
,然后它的价值或者循环像我一样下面,或正好在圈内手动计算点和硬编码的问题他们进来。
function getCircle(offset, size, point, circlesize) {
var x = Math.cos(point) * size;
var y = Math.sin(point) * size;
var $div = $('<div class="picturediv"></div>');
var $wrap = $('<div class="wrap"></div>');
$wrap.css({
top: offset + 'px',
left: offset + 'px'
});
$div.css({
top: (size+x) + 'px',
left: (size+y) + 'px',
width: circlesize + 'px',
height: circlesize + 'px'
});
$wrap.append($div);
$('#wrap').append($wrap)
}
for(var c=0;c<6;c++) {
getCircle(200, 100,c * 45,50);
}
for(var c=0;c<=10;c++) {
getCircle(100, 200,c * 25.7, 75);
}
.picturediv {
width: 50px;
height: 50px;
background-color:black;
border: 1px solid red;
border-radius:50%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.imgur.com/AilIzSF.jpg);
background-position: -219px -193px;;
background-repeat: no-repeat;
}
.wrap {
position: relative;
left: 0px;
left: 0px;
}
#wrap {
width:100%;
height: 100%;
background-color: gray;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<div class="wrap">
<div class="picturediv" style="width:120px;height:120px;left:265px;top:265px;"></div>
</div>
</div>
+0
谢谢,让我尝试这个, –
相关问题
- 1. Android如何创建默认图库到圆形图库?
- 2. 如何创建圆形图像包装
- 3. JES - 用矩形,圆圈和半圆创建图片
- 4. 如何创建圆形图库视图/图像切换器/图像视图...?
- 5. 如何在片段中创建图形?
- 6. 如何使用回形针创建圆形缩略图?
- 7. 创建图片库
- 8. 创建图片库
- 9. 如何在iOS中创建圆形UITableView?
- 10. 如何在C#中创建一个平滑的圆形图片框?
- 11. 如何从图像文件创建圆形图标?
- 12. 创建分开的圆形
- 13. 创建一个圆形
- 14. 创建圆形按钮
- 15. 如何创建圆形UIview而不是矩形形状
- 16. 如何创建圆形水平滚动视图
- 17. 如何使用RoundedAvatarDrawable创建圆形图像?
- 18. Silverlight库创建树形图
- 19. 如何创建椭圆形几何形状
- 20. 如何创建'.svg.png'图片?
- 21. 如何在win32 API中使用visual C++创建圆形/圆形按钮
- 22. CSS3 - 如何在矩形上创建圆形边框半径?
- 23. 如何让形状创建一个圆形?
- 24. 如何使用排球库创建圆角图像android
- 25. PhoneGap创建图库,存储图片
- 26. JavaScript图片缩放 - 圆形边框
- 27. 在图片上添加圆形div
- 28. 在D3JS上的圆形图片
- 29. 我想创建一个TextView包围圆形圆图如下所示
- 30. Android位图:居中裁剪+创建位图的圆形
哪里像?你有什么尝试? – Justinas
类似于http://jquer.in/wp-content/uploads/2013/12/Pop-Circle.jpg? – anu
对不起,只是分享链接 –