jQuery resize尝试了3次,最后到达它的位置';需要什么
可在此复制 我有以下几点jQuery resize尝试了3次,最后到达它的位置';需要什么,jquery,css,Jquery,Css,可在此复制 我有以下几点 $(window).resize(function () { $('.buttonWrapper').css({ position: 'absolute', left: ($(window).width() - $('.buttonWrapper').outerWidth()) / 2, top: ($(window).height() - $('.buttonWrappe
$(window).resize(function () {
$('.buttonWrapper').css({
position: 'absolute',
left: ($(window).width() - $('.buttonWrapper').outerWidth()) / 2,
top: ($(window).height() - $('.buttonWrapper').outerHeight()) / 2
});
});
// To initially run the function:
$(document).ready($(window).resize);
html
类中包含的项目从左上角开始
第一次调整大小后,它们最终位于左中
在第二次调整后,他们最终到达中心,这是我想要他们居住的地方
如何在不必手动调整窗口大小的情况下使其从中心开始,最终到达中心。尝试在
$(document).ready()中应用这些代码>
页面加载时触发调整大小
对于该更改
$(文档).ready($(窗口).resize)代码>
到
默认情况下,按钮包装宽度设置为窗口宽度将float:left
添加到ButtonRapper类以获取实际的容器宽度
更新的fiddle似乎您的问题不可重现:(假设DOM已经准备好)我已经添加了所有元素,以防问题与其他代码相关where@George更新了jsfilddle,并且它可以与所有代码一起复制更新的JSFIDLE链接。我已经跑进去了。准备好了,但仍然需要3次调整到中心。真的很奇怪。。。在$(window.load()中如何代码>?现在从左中开始,需要1次调整大小以获得中心。好的,如果我调用。在就绪内调整两次大小,效果很好。我确信这是不正确的,但是在一个合适的解决方案起作用之前,我将把它作为一个解决办法。添加浮点值没有调用函数两次就可以了。谢谢你的帮助。
<div class="background">
<div class="buttonWrapper">
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
<div class="inlineWrapper">
<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
<div class="back">
<img src="~/Content/Images/SquareTest.png" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
body {
background: rgb(150, 150, 150) url(/Content/Images/LargeLogo.png) no-repeat center center fixed;
-webkit-background-size: 80%; /* For WebKit*/
-moz-background-size: 80%; /* Mozilla*/
-o-background-size: 80%; /* Opera*/
background-size: 80%; /* Generic*/
z-index: -1;
}
.buttonWrapper {
z-index: 1;
}
@font-face {
font-family: "HemiHead";
src: url("../../fonts/hemi_head_bd_it.otf");
src: local("hemi_head_bd_it"),
url("../../fonts/hemi_head_bd_it.otf") format("opentype"),
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000px;
}
/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.flipper img {
max-height: 200px;
max-width: 200px;
vertical-align: middle;
}
/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
/* front pane, placed above back */
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.inlineWrapper {
float: left;
padding: 5px;
}
$(document).ready(function(){
$(window).resize();
});