第一个 div 是一个类别,第二个 div 包含一些照片。
我想做一些事情,当用户点击一个图像时,第一个 div 向右移动屏幕宽度的 0.7,第二个 div 中的所有图像都消失,所以我写道:
$(document).ready(function() {
$("img").click(function() {
var my_width = screen.width * 0.7;
$(".second_div").find("img").hide();
$(".first_div").css({
"transform": "translate(" + my_width + "px,0px)",
"-webkit-transform": "translate(" + my_width + "px,0px)",
"-ms-transform": "translate(" + my_width + ",0px)"
});
});
});
.first_div {
transition-duration: 2s;
}
<div class="first_div col-md-1">
//some code
</div>
<div class="second_div col-md-11>
//some codes
</div>
全屏显示时它工作正常,但是当我调整窗口大小时再试一次,第一个 div 不会位于它应该位于的位置(屏幕宽度的 0.7)有什么问题吗?
最佳答案
对于窗口宽度,我会使用以下内容:
var my_width = document.documentElement.clientWidth * 0.7;
这与 jQuery 的 $.width()
使用的解决方案相同(跨浏览器兼容)
有关获取宽度的不同方法的更多信息,请参阅此 link .
关于javascript - Div 不知道屏幕大小调整,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34279548/