- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个主要基于纯HTML和CSS的圆形图形。添加了一些 JavaScript 和 JQuery 用于 flex 文本和稍后计划的交互。
我遇到的问题是,当我单击右上角的元素时,它被左上角的元素覆盖。因此,当我通过警报检查哪个元素被点击时,我发现对于右上角元素区域的 50%,返回了左上角元素的编号。
我如何精确定位我点击的元素?这是稍后链接到我们网络元素的不同页面所必需的。
我创建了一个 JSFiddle 来显示问题:https://jsfiddle.net/niklasbuschner/gj67md4u/4/
代码如下所示:
$(document).ready(function() {
function textRotation() {
new CircleType(document.getElementById('demo1')).radius(185);
new CircleType(document.getElementById('demo2')).radius(185);
new CircleType(document.getElementById('demo3')).radius(185);
}
textRotation();
$('#demo1').children('div').addClass('pie__segment__path-text__rotation1');
$('#demo3').children('div').addClass('pie__segment__path-text__rotation3');
$('.pie__segment').on('click', function() {
var link_target = $(this).data('href');
alert('KLICK' + link_target);
});
})
html {
font-family: Arial;
font-size: 14px;
}
.pie {
border-radius: 100%;
height: calc(var(--size, 400) * 1px);
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: calc(var(--size, 400) * 1px);
}
.pie__segment {
--a: calc(var(--over50, 0) * -100%);
--b: calc((1 + var(--over50, 0)) * 100%);
--degrees: calc((var(--offset, 0) / 100) * 360);
-webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
height: 100%;
position: absolute;
-webkit-transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
width: 100%;
z-index: calc(1 + var(--over50));
cursor: pointer;
}
.pie__segment:after,
.pie__segment:before {
background: var(--bg, #e74c3c);
content: '';
height: 100%;
position: absolute;
width: 100%;
}
.pie__segment:before {
--degrees: calc((var(--value, 45) / 100) * 360);
-webkit-transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.pie__segment:after {
opacity: var(--over50, 0);
}
.pie__segment .path-text {
position: absolute;
left: -82px;
bottom: 122px;
color: #fff;
font-weight: 700;
z-index: 2;
width: 100%;
text-align: center;
}
.pie__segment .path-text span div {
height: 2.5em !important;
}
.pie__segment .path-text span div span:last-child {
color: rgba(255, 255, 255, 0.75);
}
.pie__segment .path-text.demo1 {
transform: rotate(-90deg);
}
.pie__segment__path-text__rotation1 {
transform: rotate(60deg);
}
.pie__segment .path-text.demo2 {
transform: rotate(-30deg);
}
.pie__segment .path-text.demo3 {
transform: rotate(30deg);
}
.pie__segment__path-text__rotation3 {
transform: rotate(-60deg);
}
.pie-body {
border-radius: 100%;
height: 300px;
width: 300px;
position: absolute;
top: 50px;
left: 50px;
background-color: #73c6be;
text-align: center;
overflow: hidden;
}
.pie-body p {
line-height: 260px;
font-size: 1.75em;
font-weight: 700;
color: #0896A5;
}
<div class="pie-container" style="position: relative; top: 100px; left: 100px;">
<div class="pie">
<div class="pie__segment" data-href="1" style="--offset: 0; --value: 33.33333; --bg: #089baa">
<div class="path-text demo1">
<span id="demo1">BEISPIEL EINTRAG +</span>
</div>
</div>
<div class="pie__segment" data-href="2" style="--offset: 33.33333; --value: 33.33333; --bg: #066f7a;">
<div class="path-text demo2">
<span id="demo2">NÄCHSTER EINTRAG +</span>
</div>
</div>
<div class="pie__segment" data-href="3" style="--offset: 66.66666; --value: 33.33333; --bg: #044249;">
<div class="path-text demo3">
<span id="demo3">WEITERER EINTRAG +</span>
</div>
</div>
</div>
<div class="pie-body">
<p>Kernaussage</p>
</div>
</div>
最佳答案
以下是如何使用 svg
的示例
function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
}
function describeArc(x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle);
var end = polarToCartesian(x, y, radius, startAngle);
var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";
var sweepFlag = endAngle > startAngle ? 0 : 1; //sic
var d = [
"M", start.x, start.y,
"A", radius, radius, 0, largeArcFlag, sweepFlag, end.x, end.y
].join(" ");
return d;
}
window.onload = function() {
let arc1 = document.getElementById("arc1")
let arc2 = document.getElementById("arc2")
let arc3 = document.getElementById("arc3")
arc1.setAttribute("d", describeArc(200, 200, 100, 120, 0));
arc2.setAttribute("d", describeArc(200, 200, 100, 240, 120));
arc3.setAttribute("d", describeArc(200, 200, 100, 360, 240));
let text1 = document.getElementById("text1")
let text2 = document.getElementById("text2")
let text3 = document.getElementById("text3")
let textPath1 = document.getElementById("textPath1")
textPath1.setAttribute("d", describeArc(200, 200, 95, 120, 0));
let textPath2 = document.getElementById("textPath2")
textPath2.setAttribute("d", describeArc(200, 200, 95, 240, 120));
let textPath3 = document.getElementById("textPath3")
textPath3.setAttribute("d", describeArc(200, 200, 95, 360, 240));
[arc1, arc2, arc3, text1, text2, text3].forEach(el => {
el.addEventListener("click", e => {
console.log(e.target.getAttribute("link"))
})
})
};
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}
body {
background-color: rgb(36, 41, 46);
display: flex;
align-items: center;
justify-content: center;
}
svg {
/*outline: 2px solid lightgreen;*/
height: 400px;
width: 400px;
transform: scale(1);
}
path,
text {
cursor: pointer;
}
text {
font-family: arial;
font-size: 14px;
fill: #fff;
}
<svg viewBox="0 0 400 400">
<circle shape-rendering="geometricPrecision" cx="200" cy="200" r="100" fill="#73c6be" stroke="none" />
<path shape-rendering="geometricPrecision" id="arc1" fill="none" stroke="#089baa" stroke-width="30" link="Link1.html" />
<path shape-rendering="geometricPrecision" id="arc2" fill="none" stroke="#066f7a" stroke-width="30" link="Link2.html" />
<path shape-rendering="geometricPrecision" id="arc3" fill="none" stroke="#044249" stroke-width="30" link="Link3.html" />
<path id="textPath1" fill="none" stroke="none" />
<path id="textPath2" fill="none" stroke="none" />
<path id="textPath3" fill="none" stroke="none" />
<text id="text1">
<textPath
href="#textPath1"
link="Link1.html"
startOffset="15%"
>BEISPIEL EINTRAG+</textPath>
</text>
<text id="text2">
<textPath
href="#textPath2"
link="Link2.html"
startOffset="10%"
>NACHSTER EINTRAG+</textPath>
</text>
<text id="text3">
<textPath
href="#textPath3"
link="Link3.html"
startOffset="10%"
>WEITERER EINTRAG+</textPath>
</text>
</svg>
关于javascript - 我如何定位一个可见但位于另一个元素下方的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59615618/
我必须从我的网站中删除()一些iem,然后将它们追加()回来,但是当我追加它们时,它们出现在不同的地方,而我希望它们完全显示在它们以前的同一个地方是。 有什么解决办法吗? 这是一个沙箱,请随意更新(注
一个。图片 (960x7)b. div(宽度:960,填充:10) 我想定位 (a),使其距顶部 50 像素,居中。我想将 (b) 放置在 (a) 的正下方,没有空格。 我的 CSS 如下: @cha
放置某物的正确方法是什么?我有一个在中心显示博客文章的 div。 "" rel="bookmark"> BY LOUIS MOORE ON " pubdate>
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈,无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开,visit the help center . 关闭1
我已经成功地使用了 position:fixed 设置 CSS/CSS3 并且工作得很好! 我几天前看到了这个,想知道他们是如何实现向下滚动时发生的效果的,菜单栏在滚动前处于一个位置,然后转到顶部并自
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 7 年前。 Improv
接口定义 能够对于文字、段落乃至任何元素的精准定位 并做出增删改查,都是在开发一款富文本编辑器时一项最基本也是最重要的功能之一。让我们先来看看Slate中对于如何在文档树中定位元素是怎么定义的
例如,使用 WPF 在选项卡控件的最左上角定位三个 tabitem 和在最右上角定位一个 tabitem 的正确方法是什么? 我尝试通过更改边距将第四个 tabitem 向右移动,但这并没有产生好的结
我正在尝试使用 Javascript 创建一个跟随鼠标在页面上移动的东西。我希望它是米老鼠,我希望他的眼睛跟随鼠标移动他的眼球...这是我到目前为止的代码(从网络上的各个地方收集,因此归功于编写该部分
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 已关闭 9 年前。 Improve
我试图将两个按钮放置在左上角。但它们始终位于顶部中心。 我已经尝试过这个: jp = new JPanel(); jp.setLayout(new GridBagLayout()); GridBagC
我在使用 JQuery 向下滑动功能时遇到问题。我可以让它正常工作,但是我向下滑动的元素的位置会根据视口(viewport)的大小而变化。我想做的是将它与它滑动的元素联系起来。 This JSfidd
我正在尝试创建一个棋盘,并将其放置在屏幕中间,但到目前为止我无法将它直接放在中间。我不想将位置硬编码到屏幕上,因为我要处理不同的屏幕尺寸。 var winsize = cc.director.
我正在尝试从 mysql 中的 2 个字符串点之间提取数据,我的示例脚本是 'otherdata&p1=textneeded&otherdata' 我需要拉出“textneeded”位,“P1=”是起
如何在 JavaFX 中设置按钮的位置?我的代码: bZero = new Button(); bZero.setPrefSize(45, 20); mainPane.getChildren().ad
我有一个 iPhone 应用程序,我可以在其中显示一系列图像。当用户点击图像时,我需要将该图像带到第一个位置,表明它是所选图像。我可以通过子类化实现 uiscrollview 中的点击。但是我无法将
在下图中,它显示了一个image、textbox 和一个css menu image 我的 CSS 菜单非常完美。我终于按照我需要的方式得到了它。我的问题是我需要导航栏中央的文本框,然后我需要我的图像
我必须创建一个看起来像这样的 div id为2的div应该出现在图片的右下角,图片的大小不固定id=2的div应该应用什么css id =1 的 div 没有定义位置,所以使用默认值,图像也是
如何将我的文本和图像对齐在同一行? 每当我使用 padding 或 margins 时,它就会崩溃到我正在使用的圆形图像中。 #alignPhoto { padding-right: 50px;
简单的问题,如何定位具有整个页面引用的元素? 在我的例子中,我在标题中得到了一个 float 图像,然后是 2 组标题。当我使用时: text-align: center; 它使用图像宽度端和页面其余
我是一名优秀的程序员,十分优秀!