作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将图像从其当前位置向右移动,因此我需要将像素添加到它现在所处的左侧位置。
我有一个 flex
容器,其中有一个 image
和一个 div
。它们都以具有 justify-content: center;
属性的容器为中心。
我遇到的问题是,当我尝试移动位置为 absolute
的图像时,它会返回到最近的位置为 relative
的父级(其容器)并开始在那里添加像素,这会产生一种奇怪的视觉效果。
HTML代码:
<button type="button" onclick="moveImage()">Move image</button>
<div id="container">
<div id="left" class="block">Left</div>
<div id="center" class="block">
<img id="image" src="https://appharbor.com/assets/images/stackoverflow-logo.png" alt="stackoverflow">
</div>
<div id="right" class="block">Right</div>
</div>
CSS代码:
html, body{
width: 100%;
height: 100%;
}
#container{
display: flex;
height: 100%;
}
.block{
flex: 1;
}
#left{
background-color: red;
}
#center{
position: relative;
display: flex;
background-color: yellow;
justify-content: center;
}
#right{
background-color: orange;
}
#divCentered{
width: 50%;
height: 100px;
background-color: brown;
}
Javascript 代码:
$( document ).ready(function() {
var divParent = document.getElementById('center');
var div = document.createElement("div");
div.setAttribute("id", "divCentered");
divParent.appendChild(div);
});
function moveImage(){
$("#image").animate({
left: "+=300px"
}, 1000);
}
JSFiddle您可以在其中看到图像如何返回到其父级并开始在那里添加像素。
有没有办法避免图像将一些像素返回到其父级并开始在其当前位置添加像素?
提前致谢!
最佳答案
最后,经过大量证明,我找到了解决方法。
我必须使用 .offset()属性获取 container 和 image left
属性作为文档的引用。
然后,我必须将图像的 left
属性设置为 0,因为当 container
位于左侧时它会被定位(因为容器是相对
绝对
图像的父级)。
之后,只需将两个值相减即可得到容器偏移量与图像之间的差值,从而得到图像相对于其容器的实际位置,并将此值设置为 left
属性图片。
这是我添加的代码:
var leftCenterDiv = $("#center").offset().left;
var leftImage = $("#image").offset().left;
$("#image").css("left", 0);
$("#image").css("left", leftImage - leftCenterDiv);
和更新的JSFiddle .
关于javascript - 如何将像素添加到元素的当前位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37054431/
我是一名优秀的程序员,十分优秀!