- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
这是代码,当灰色线向左→向右移动时,我需要用圆圈连接它们。有什么方法可以计算距离,以便我可以将灰线与圆圈连接起来吗?
$(window).scroll(function() {
st = $(window).scrollTop();
/////////////////////////// Circle animations ////////////////////////////
var circleOne = $("#step1").offset().top;
if (st > circleOne - 400) {
$("#step1").find(".box-circle").addClass("moveMe");
$("#step1").addClass("step-moving");
}
var circleTwo = $("#step2").offset().top;
if (st > circleTwo - 300) {
$("#step2").find(".box-circle").addClass("moveMeRight");
$("#step2").addClass("step-moving2");
}
var circleThree = $("#step3").offset().top;
if (st > circleThree - 300) {
$("#step3").find(".box-circle").addClass("moveMeLeft");
$("#step3").addClass("step-moving3");
}
var circleThree = $("#step4").offset().top;
if (st > circleThree - 300) {
$("#step4").find(".box-circle").addClass("moveMeRight1");
$("#step4").addClass("step-moving4");
}
});
#how-we-work {
overflow: hidden;
}
.work-holder {
padding: 80px 0;
}
.work-holder:after {
display: block;
content: " ";
clear: both;
}
.step {
margin: 0 0 120px;
}
.step:after {
display: block;
content: " ";
clear: both;
}
.box-circle:after {
position: absolute;
width: 5px;
height: 120px;
background: #d3d6d9;
content: " ";
bottom: -120px;
left: 50%;
}
.box-circle.box-circle01:after {
display: none;
}
.box-circle {
width: 200px;
height: 200px;
background: #2f303a;
position: relative;
left: 300px;
border-radius: 100%;
padding: 20px 20px 0;
float: left;
}
.box-circle.moveMe {
left: 100px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
background: #00b7e9;
}
.box-circle.moveMe:after {
ms-transform: rotate(-45deg);
/* IE 9 */
-webkit-transform: rotate(-45deg);
/* Chrome, Safari, Opera */
transform: rotate(-45deg);
left: 96%;
bottom: -164px;
height: 195px;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
transition: all 1.3s;
}
.step-number {
float: left;
font-size: 76px;
color: #fff;
font-weight: 700;
}
.step-icon {
float: right;
width: 60px;
height: 60px;
margin: 30px 30px 0 0;
}
.call {
background: url("../images/ico-call.svg") no-repeat;
background-size: 100% 100%;
}
.started {
background: url("../images/ico-get-s.svg") no-repeat;
background-size: 100% 100%;
}
.project {
background: url("../images/ico-project.svg") no-repeat;
background-size: 100% 100%;
}
.project-done {
background: url("../images/ico-done.svg") no-repeat;
background-size: 100% 100%;
}
.para-step {
font-size: 14px;
color: #fff;
}
.para-holder {
float: left;
position: relative;
left: 350px;
max-width: 390px;
text-align: center;
}
.box-circle.moveMe .step-number {
margin: 0 0 0 -80px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
color: #00b7e9;
font-size: 130px;
position: relative;
top: 15px;
}
.box-circle.moveMe .step-icon {
margin: 0 -94px 0 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
width: 80px;
height: 80px;
top: -24px;
position: relative;
}
.box-circle.moveMe .detail {
text-align: center;
top: -141px;
}
.box-circle.moveMe .step-icon.call {
background: url("../images/ico-call-hover.svg") no-repeat;
background-size: 100% 100%;
}
.step-moving .para-holder .para-step {
-webkit-transition: 1s all;
-moz-transition: 1s all;
-ms-transition: 1s all;
-o-transition: 1s all;
transition: 1s all;
color: #233341;
}
.circle-top:after {
display: block;
clear: both;
content: " ";
}
.detail {
overflow: hidden;
color: #fff;
position: relative;
top: -20px;
padding: 0 0 0 10px;
font-size: 20px;
}
.detail span {
display: block;
}
.detail strong {
font-size: 900;
}
.box-circle.moveMeRight {
left: 700px;
-webkit-transition: 1.3s all;
-moz-transition: 1.3s all;
-ms-transition: 1.3s all;
-o-transition: 1.3s all;
background: #00b7e9;
}
.box-circle.moveMeRight .step-number {
margin: 0 0 0 -95px;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
color: #00b7e9;
font-size: 130px;
position: relative;
top: 25px;
}
.box-circle.moveMeRight .step-icon {
margin: 0 -104px 0 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
width: 80px;
height: 80px;
position: relative;
top: -34px;
}
.box-circle.moveMeRight .started {
background: url("../images/ico-get-s-hover.svg") no-repeat;
background-size: 100% 100%;
}
.box-circle.moveMeRight .detail {
text-align: center;
top: -130px;
}
.step-moving2 .para-holder {
left: 0;
top: 50px;
}
.step-moving2 .para-holder .para-step {
color: #233341;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
}
.box-circle.moveMeLeft {
left: 100px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
background: #00b7e9;
}
.box-circle.moveMeLeft .detail {
text-align: center;
top: -141px;
}
.box-circle.moveMeLeft .step-icon.project {
background: url("../images/ico-project-hover.svg") no-repeat;
background-size: 100% 100%;
}
.step-moving3 .para-holder .para-step {
-webkit-transition: 1s all;
-moz-transition: 1s all;
-ms-transition: 1s all;
-o-transition: 1s all;
transition: 1s all;
color: #233341;
}
.box-circle.moveMeLeft .step-icon {
margin: 0 -100px 0 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
width: 80px;
height: 90px;
top: -24px;
position: relative;
}
.box-circle.moveMeLeft .step-number {
margin: 0 0 0 -95px;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
color: #00b7e9;
font-size: 130px;
position: relative;
top: 15px;
}
.box-circle.moveMeRight1 {
left: 700px;
-webkit-transition: 1.3s all;
-moz-transition: 1.3s all;
-ms-transition: 1.3s all;
-o-transition: 1.3s all;
background: #00b7e9;
}
.box-circle.moveMeRight1 .step-number {
margin: 0 0 0 -95px;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
color: #00b7e9;
font-size: 130px;
position: relative;
top: 25px;
}
.box-circle.moveMeRight1 .step-icon {
margin: 0 -104px 0 0;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-ms-transition: all 1s;
-o-transition: all 1s;
width: 80px;
height: 80px;
position: relative;
top: -34px;
}
.box-circle.moveMeRight1 .project-done {
background: url("../images/ico-done-hover.svg") no-repeat;
background-size: 100% 100%;
}
.box-circle.moveMeRight1 .detail {
text-align: center;
top: -130px;
}
.step-moving4 .para-holder {
left: 0;
top: 50px;
}
.step-moving4 .para-holder .para-step {
-webkit-transition: 1s all;
-moz-transition: 1s all;
-ms-transition: 1s all;
-o-transition: 1s all;
transition: 1s all;
color: #233341;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="how-we-work">
<div class="container">
<span class="title-one">We Don’t Work</span>
<h1 class="about-heading">WE LOVE IT</h1>
<section class="work-holder">
<div id="step1" class="step">
<div class="box-circle">
<div class="circle-top">
<span class="step-number">1</span>
<span class="step-icon call"></span>
</div>
<div class="detail">
<span>Call To</span>
<strong>Our Manager</strong>
</div>
</div>
<div class="para-holder">
<p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
</div>
</div>
<div id="step2" class="step">
<div class="box-circle">
<div class="circle-top">
<span class="step-number">2</span>
<span class="step-icon started"></span>
</div>
<div class="detail">
<span>We Get</span>
<strong>You Started</strong>
</div>
</div>
<div class="para-holder">
<p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
</div>
</div>
<div id="step3" class="step">
<div class="box-circle">
<div class="circle-top">
<span class="step-number">3</span>
<span class="step-icon project"></span>
</div>
<div class="detail">
<span>We Start</span>
<strong>Your Project</strong>
</div>
</div>
<div class="para-holder">
<p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
</div>
</div>
<div id="step4" class="step">
<div class="box-circle box-circle01">
<div class="circle-top">
<span class="step-number">4</span>
<span class="step-icon project-done"></span>
</div>
<div class="detail">
<span>You Get Your </span>
<strong>Project Done</strong>
</div>
</div>
<div class="para-holder">
<p class="para-step">After understanding everything the Account Manager takes the necessary steps to launch your project. Throughout the project, they remain a source of contact and support, representing your needs in the company through consistent follow-up.</p>
</div>
</div>
</section>
</div>
</section>
最佳答案
免责声明:还不能发表评论。
This 可能会帮助您。获取坐标,用勾股定理计算距离,做成那个长度的灰线。
关于jquery - 用圆圈连接灰线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28044777/
我需要移动一个对象,在我的例子中是给定路径上的一个字符串。实际上路径可以是半圆。如附图所示,字符串应该出现在另一个物体的后面,沿着路径移动并消失在第二个物体(两个图像)后面。我不知道如何开始...希望
我需要构建一个圆形(在 css 中),它有 2 行文本,可以根据选择的翻译改变长度并始终居中。 到目前为止我有这个: h3 { background-color: #fcd141; borde
是否可以在 CSS3 中使用 -webkit-border-radius 绘制一个圆,同时将宽度和高度限制为特定变量(例如 height:100px 和 width:100px) 所以当在圆圈内添加文
我正在尝试在方形图像上叠加一个圆圈。文本需要在圆圈中水平和垂直居中。 我几乎用正方形 div 做对了,但是一旦我将图像放入组合中,圆圈就会移动到图像下方。 我的代码。 .Container { w
使用 CSS,我有一个将图标放置在圆圈/圆盘中的显示。 这是我的例子: 但我很难将图标放在圆圈/圆盘的中心。 我已经搜索过 SO(找到 this post 但更改行高只会扩展圆盘/圆圈)和 Googl
我正在尝试在一行中制作几个带有文本的 css 圆圈。当我使用 circle 类来 img 时,圆圈是内联的,但我无法添加任何文本。当我使用 circle class 到 div 时,我可以添加文本,但
我尝试在单击“提交”按钮时显示 ProgessBar。它会在数据加载完成时隐藏。但是,progressBar 没有覆盖整个屏幕。相反,它被按钮覆盖。请引用屏幕截图,它应该更容易理解我的意思。 我要实现
这个问题在这里已经有了答案: Circle with two borders (4 个答案) 关闭 7 年前。 我有一个只有一个边框的圆圈,但我想知道是否有办法实现一个有两个不同颜色边框的圆圈。我有
我正尝试按照以下示例在 CSS 中创建一个带有镶嵌边框的圆圈: 我有以下 HTML 和 CSS,但它没有产生我需要的效果: .inlay-circle { width: 15rem; heig
我找到的每个指南都有相同的线条和填充颜色。我想要的只是一个带有红线和白色填充的圆圈。 我试过: .circle { border: red; background-color: #FF
我正在寻找一种用纯色和图像填充 SVG 圆圈的方法。 我现在尝试的是使用这段代码: 它用我的背景图片绘制
我目前正在组建一个将托管用户的网站。每个用户都会有一个个人资料页面,该页面将显示 SVG 圆数组,每个用户在数据库的用户表中自己的行中也有一个相应的 SVG_number。 例如,如果 User1 在
我正在尝试在 SVG 中创建三组圆圈。我给他们打电话circleA circleB和circleC我打算给它们涂上不同的颜色。 var circleA = [ [50,48],[106,35]
使用 snapsvg.io,我想知道是否可以添加可点击的链接,例如 My Link标记到 SVG 文本、圆圈或线条。 我这里的一个例子是文本: var s = Snap("#svg"); var te
所以这是我的一个小项目,只是为了好玩。我尝试使用 libgdx 在 Java 中重新创建随机 Walker。 现在我认为我的代码非常成功,因为它工作正常(也许)。 但是有一个问题,圆比其他轴更倾向于向
我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像?
以下圆形标签位于标签内: 现在我必须将生成的圆圈附加到标签内,例如 更新: function createCircle(a) { var circle = document.
我希望圆圈类似于饼图,具有相同的不同颜色切片。出于某种原因,我画了一个圆,在带有颜色的一侧有弧形,中间有一个白色八边形。 for(var i=0;i<8;i++){ ctx.beginPath
我有一个场景,我必须在样条图中创建标记/圆圈。我使用 highcharts 创建了样条图表,图表的代码如下。 我的输出应该如下所示。我已经在图像中标记了预期的圆圈: $(function ()
给定以下示例: 是否有可能检测到网络中的环路 (I1, I2,I3, C6, C7, I5)? 我试过:simple_cycles → 它适用于 3 个节点,但不能超过 3 个。 我需要检测包含所有节
我是一名优秀的程序员,十分优秀!