我正在寻找添加滚动效果,当释放滚轮时捕捉到div的顶部。唯一的问题是每个div都有100%的高度(因此一次只能在屏幕上显示一个图像)
我遇到了这个小提琴:http://jsfiddle.net/djsbaker/dxzk4/它似乎与300px间隔很好地工作,但是这样的东西怎么能被翻译成100%高度的div?
这是我的代码:
<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>
<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>
<div class="fill-browser" style="background-image: url(../images/background-v2.jpg)"></div>
CSS:
.fill-browser{
position:relative;
left: 1%;
height:98%;
width:98%;
margin-bottom: 5px;
background: no-repeat 50% 50%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这也是一个jsfiddle演示:http://jsfiddle.net/vHAWW/
答案 0 :(得分:0)
它也可以100%使用,
取决于你需要多少个盒子,你需要将盒子父高度设置为盒子* 100,盒子高度设置为100个/盒子,也不要忘记将体和html设为100%。
jsfiddle.net/WQtA8
body, html {
height:100%;
}
.box
{
color: #fff;
height: 10%;
width: 300px;
border: 1px solid white;
}
#container {
height:1000%;
width:300px;
background-color:blue;
}
.red {background-color:red;}
.green {background-color:green;}
.yellow {background-color:yellow;}
编辑:
因为你正在使用jquery allready,所以不妨动态地计算和设置高度:
$(document).ready(function() {
var boxes = $(".box").length;
var height = boxes * 100 + "%";
var boxheight = 100/boxes + "%";
$("#container").css({ height : height });
$(".box").css({height: boxheight});
});