- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试像在 jsfiddle 中一样创建一个响应式圆圈,其中有一个内圆圈。如果我调整页面大小,我希望外圈和内圈自动调整。
我怎样才能实现这种行为?
这是我尝试过的:http://jsfiddle.net/ineffablep/x03f61db/
function createFields() {
$('.field').remove();
var container = $('#container');
for (var i = 0; i < +$('input:text').val() + 1; i++) {
$('<div/>', {
'class': 'field',
'text': i
}).appendTo(container);
}
}
function distributeFields() {
var fields = $('.field'),
container = $('#container'),
width = center.width() * 2,
height = center.height() * 2,
angle = 0,
step = (2 * Math.PI) / fields.length;
var radius = width / 2;
var containerLength = $('input:text').val();
angle = step * (containerLength - 1);
fields.each(function() {
var x = Math.round(width + radius * Math.cos(angle));
var y = Math.round(height + radius * Math.sin(angle));
$(this).css({
right: x + 'px',
top: y + 'px'
});
angle -= step;
});
}
var center = $('#center');
$(window).resize(function(height) {
$('#container').width($(window).height() * 0.9)
$('#container').height($(window).height() * 0.9)
var width = $('#container').width() * 0.4;
console.log("width", $('#container').width());
console.log("height", $('#container').height());
var radius = width / 2;
width += 'px';
radius += 'px';
center.css({
width: width,
height: width,
'-moz-border-radius': radius,
'-webkit-border-radius': radius,
'border-radius': radius
});
createFields();
distributeFields();
// rest of your code for font-size setting etc..
});
$(window).resize();
$('input').change(function() {
createFields();
distributeFields();
});
body {
padding: 2em;
}
#center {
position: absolute;
background: #00A8D9;
width: 50%;
height: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #000;
top: 55%;
left: 27%;
}
.field {
width: 20px;
height: 20px;
position: absolute;
color: #f00;
}
Number of fields:
<input type="text" value="60" />
<div id="container">
<div id="center"></div>
</div>
最佳答案
这是一个 exemple关于如何处理这个问题。
我首先做的是为您的 #container
添加一个 css 规则:
#container{
position:relative;
float:right;
}
然后,我编辑了 #center
元素的 top
和 left
CSS 值,并添加了 box-sizing
属性(防止 border
崩溃 width
行为):
#center {
position:absolute;
background: #00A8D9;
width: 50%;
height: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border:3px solid #000;
top:100%;
left:0%;
box-sizing:border-box;
}
我发现您的字段圆圈的中心位于 #container
的左下角,因此我为 #center
元素重现了此行为。这就是它位于 top:100%
和 left:0%
的原因,但是为了准确地居中于左下角,我需要添加负边距 ( #center
大小的一半),根据 #container
大小计算:
$(window).resize(function(height) {
$('#container').width($(window).height()*0.9);
$('#container').height($(window).height()*0.9);
var width = $('#container').width() * 0.4;
var radius = width;
var topPos = (width/2)*(-1.2);
var rightPos = (width/2)*(-1.2);
radius += 'px';
topPos+="px";
rightPos+="px";
$('#center').css({
left:'0%',
top: '100%',
'margin-top':topPos,
'margin-left':rightPos,
'-moz-border-radius' : radius,
'-webkit-border-radius' : radius,
'border-radius' : radius
});
createFields();
distributeFields();
// rest of your code for font-size setting etc..
});
PS:我发现你的字段圆的中心在 #container
的左下角 |事实并非如此,处理一些像素。您定位字段的方式可能会导致这个小差距。您只需要找到一种方法来使用与定位字段相同的逻辑来调整边距
关于jquery - Responsive Circle 内圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29929006/
我有一个包含以下内容的简单服务: import { Injectable } from '@angular/core'; import { Http, Response } from '@angula
在我的 Angular-12 应用程序中,我在服务中有以下代码: constructor(private http: HttpClient, private router: Router) {
我是android领域的新手,我想从响应json数组访问每个结果元素,但我无法做到这一点,我试图获取每个元素,但我只得到一个值“rohit1”是第一个元素。请帮助我。 我是 rohit parmar,
我正在用 java 编写 RESTful 服务,但是当我尝试使用 Resource 类时,显示以下错误:类型 Response.Response 构建器不可见。我不明白问题可能是什么,因为我已经导入了
在 Spring 应用程序中,我正在调用第三方服务,我正在发送 XML 请求并获取 XML 响应,当无法将该响应解析为 Java 对象时,我正确地获得了 XML 响应,我收到以下错误: org.spr
我正在发布一个页面 URL 例如 mysite.com/disclaimer/someinfo 此页面显示协议(protocol),如果用户单击同意按钮,则 PDF 文件将作为附件流式传输。 这样做的
我是 Camel 的新手。我一直在尝试将数据(文件中的 Json)提交到网络服务。这是我的代码: public static void main(String args[]) throws E
我有一个 HTTP 执行器类: Future future = service.apply(request).toJavaFuture(); 现在我想删除 ? extends其中的一部分,因为我不想让
我想将我所有的 http header 响应设置为这样的: response.headers["X-Frame-Options"] = "SAMEORIGIN" 我检查了this question ,
我们有两个 channel ,分别是 channelA 和 channelB。 在 channel A中我们有两个目的地 一个。第一个目的地将使用 XML 数据作为输入调用 channelB,并从 c
以下有什么区别 response.status(200).send('Hello World!'); 和这个 response.writeHead(200, {'content-type':'appl
我试图让Foundation在iPhone的浏览器上响应。我已经在手机上尝试过Safari和Chrome,它们都显示了 table 面布局。 但是,在 table 面上,如果缩小浏览器窗口,则会看到布
您好,当我在云代码中运行此作业时,我收到一条错误日志:Failed with: success/error was not called. 定义功能运行良好,但在作业日志中我有此错误日志。请协助我解决
我正在使用ozeki ng短信网关。我无法将任何短信发送到任何手机。请帮助我通过网络发送短信到手机 从客户端检测到一个潜在危险的Request.Form值(textboxError =“。设置此值之后
今天我在 WordPress 中遇到了问题。当我尝试创建一个新页面并在 WordPress 管理部分上传新图像时,我尝试找出解决方案,但我没有得到它......所以经过一个小时的打磨后我得到了一个解决
我过去常常通过刷新和结束来结束对客户端的传输,如下面的代码所示。 Response.Flush(); Response.End(); 但是,Response.End() 将缓冲内容刷新到客户端让我印象
我正在编写一个在单击按钮时显示对话框窗口的函数:这里是与状态和 statusCode 相关的代码段。 if(response.status>300){
从资源清理的角度,为什么会有Response.Close()和Response.Dispose(),哪个更全面(调用另一个)? 最佳答案 在提供这两种方法的情况下,Dispose 的实现应该调用 Cl
在我注意到我的代码可能在以经典模式设置的服务器上运行之前,我一直在使用 Response.Header.Add()。在这种情况下,异常“此操作需要 IIS 集成管道模式”。被提出。 我切换到 Resp
Response.End() 生成 ThreadAbortException。 使用 HttpContext.Current.ApplicationInstance.CompleteRequest 代
我是一名优秀的程序员,十分优秀!