【发布时间】：2011-10-15 22:40:01
【问题描述】：
我真的很纠结 CSS。我正在尝试使用一种滑动门技术来打开一个完整的客户区 div，但我就是无法填满整个客户区。我正在从这里修改：
http://web.enavu.com/tutorials/sliding-door-effect-with-jquery/
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<style type='text/css'>
.box_container{
position:relative; /* important */
width:100%; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:100%; /* important */
/*min-width: 100%;*/
/*min-height: 100%;*/
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder
{
width: 100%;
height: 100%;
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div {
position:relative; /* important so we can work with the left or right indent */
overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
width:50%; /* make it 50% of the whole images_holder */
height: 100%;
float:left; /* make then inline */
}
.right img{
margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
}
.clear{
clear:both;
}
</style>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
$(document).ready(function () {
var cv, box, holder, cvContext, width, height, my_gradient, boxHeight, boxWidth;
// box = document.getElementById("box");
// boxWidth = box.offsetWidth;
// boxHeight = box.offsetHeight;
// holder = document.getElementById("imageHolder");
// holder.width = boxWidth;
// holder.hieght = boxHeight;
box = document.getElementById("box");
//$("box").css({ width: $(window).width(), height: $(window).height() });
$("box").css({ width: window.innerWidth, height: window.innerHeight });
$("imageHolder").css({ 'min-width': window.innerWidth, 'min-height': window.innerHeight });
cv = document.getElementById("canvas1");
width = cv.width;
height = cv.height;
cvContext = cv.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, width, height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, width, height);
cv = document.getElementById("canvas2");
width = cv.width;
height = cv.height;
cvContext = cv.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, width, height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, width, height);
//when the user hovers over the div that contains our html...
$('.box_container').hover(function () {
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... */
$(this).find('.left').animate({ right: width }, { queue: false, duration: 300 });
$(this).find('.right').animate({ left: width }, { queue: false, duration: 300 });
}, function () {
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('.left').animate({ right: 0 }, { queue: false, duration: 300 });
$(this).find('.right').animate({ left: 0 }, { queue: false, duration: 300 });
//... close it and that's it
});
});
</script>
</head>
<body>
<!--START THE MAIN CONTAINER-->
<div id="box" class='box_container'>
<!--START THE IMAGE PARTS HOLDER-->
<div id="imageHolder" class='images_holder'>
<!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
<div class='image_div left'><canvas id="canvas1" style="width:100%; height:100%;"/></div>
<div class='image_div right'><canvas id="canvas2" style="width:100%; height:100%;"/></div>
<!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
<div class='clear'></div>
</div>
<!--END THE IMAGE PARTS HOLDER-->
<!--START THE TEXT-->
The text underneath
<!--END THE TEXT-->
</div>
<!--END THE MAIN CONTAINER-->
</body>
</html>
我怎样才能让面板覆盖屏幕的整个客户区域，而不是小细条？
好的，我已经尝试简化并删除所有 css，所以一切都在后面的代码中完成。我按照建议使用视口。但似乎没有任何效果。事实上，它甚至不再识别悬停。
我做错了什么？为什么我似乎无法更改任何宽度、高度等 onload？为什么我的悬停停止工作？
请帮忙。
<!DOCTYPE HTML>
<!--Note this doctype is essential to recognise canvas-->
<html>
<head>
<title>Dual sliding door effect with one Image</title>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript'>
function MyOnLoad() {
var cvContext, my_gradient;
var width, height, widthWin, heightWin, widthDoc, heightDoc, widthMain;
var divBox = document.getElementById('divBox');
var divHolder = document.getElementById("divHolder");
var divUnderneath = document.getElementById("divUnderneath");
var divDoorLeft = document.getElementById("divDoorLeft");
var divDoorRight = document.getElementById("divDoorRight");
var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");
widthWin = $(window).width(); // returns width of browser viewport
heightWin = $(window).height(); // returns width of browser viewport
widthDoc = $(document).width(); // returns width of HTML document
heightDoc = $(document).height(); // returns width of HTML document
width = widthWin;
height = heightWin;
divBox.style.width = width;
divBox.style.height = height;
divBox.style.background = "#AAFFAA";
divBox.style.position = "relative";
divBox.style.overflow = "hidden";
divBox.style.color = "#FFFFFF";
divHolder.style.width = width;
divHolder.style.height = height;
divHolder.style.background = "#AAAAFF";
divHolder.style.position = "absolute";
divUnderneath.style.width = width;
divUnderneath.style.height = height;
divUnderneath.style.background = "#FFAAAA";
divDoorLeft.style.position = "relative";
divDoorLeft.style.overflow = "hidden";
divDoorLeft.style.width = Math.round(0.5 * width);
divDoorLeft.style.height = height;
divDoorLeft.style.float = "left";
divDoorRight.style.position = "relative";
divDoorRight.style.overflow = "hidden";
divDoorRight.style.width = Math.round(0.5 * width);
divDoorRight.style.height = height;
divDoorRight.style.float = "left";
divDoorRight.style.marginLeft = -width;
canvas1.width = Math.round(0.5 * width);
canvas1.height = height;
cvContext = canvas1.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, canvas1.width, canvas1.height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, canvas1.width, canvas1.height);
canvas2.width = Math.round(0.5 * width);
canvas2.height = height;
cvContext = canvas2.getContext("2d");
my_gradient = cvContext.createLinearGradient(0, 0, canvas2.width, canvas2.height);
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "white");
cvContext.fillStyle = my_gradient;
cvContext.fillRect(0, 0, canvas2.width, canvas2.height);
//when the user hovers over the div that contains our html...
var d = $("divBox");
$("divBox").hover(function () {
//... we get the width of the div and split it by 2 ...
var width = $(this).outerWidth() / 2;
/*... and using that width we move the left "part" of the image to left and right "part"
to right by changing it's indent from left side or right side... */
$(this).find('divDoorLeft').animate({ right: width }, { queue: false, duration: 300 });
$(this).find('divDoorRight').animate({ left: width }, { queue: false, duration: 300 });
}, function () {
//... and when he hovers out we get the images back to their's starting position using the same function... '
$(this).find('divDoorLeft').animate({ right: 0 }, { queue: false, duration: 300 });
$(this).find('divDoorRight').animate({ left: 0 }, { queue: false, duration: 300 });
//... close it and that's it
});
}
</script>
</head>
<body onload="MyOnLoad()" style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; overflow: hidden; background:#FF0000">
<div id="divBox">
<div id="divHolder">
<div id="divDoorLeft"><canvas id="canvas1"/></div>
<div id="divDoorRight"><canvas id="canvas2"/></div>
</div>
<div id="divUnderneath">
Looks nice doesn't it :)
</div>
</div>
</body>
</html>
【问题讨论】：
-
需要一些说明才能帮助您解决这个问题。您要填充代码中的哪个 div，用什么填充？背景颜色，或者您试图用图像填充整个 div？如果您在某处发布并链接到它，我可以查看并帮助您解决这里的问题。 JsFiddle?
-
Arwhy，它是 div id=imageHolder 的下面位（即“下面的文本”位）。我希望 box_container 下面完全填满网页的客户端屏幕。最终目标是放置大量 div 来代替“下方的文本”，这也会填满整个屏幕。任何时候除了一个之外的所有东西都将被隐藏，每次门板打开时可见的都会随机变化。