Jquery CSS问题-我希望客户端区域完全填满
我真的很难对付CSS。我正在尝试一种滑动门技术，它可以打开一个完整的客户区div，但我就是无法填满整个客户区。我从这里出发： 代码如下：Jquery CSS问题-我希望客户端区域完全填满,jquery,css,sliding,panels,Jquery,Css,Sliding,Panels,我真的很难对付CSS。我正在尝试一种滑动门技术，它可以打开一个完整的客户区div，但我就是无法填满整个客户区。我从这里出发： 代码如下： <!DOCTYPE HTML> <html> <head> <title>Title</title> <style type='text/css'> .box_container{ position:relative; /* important */
<!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>
标题
.箱式集装箱{
位置：相对；/*重要*/
宽度：100%；/*我们必须设置容器的特定宽度，以便在图像开始移动时不会拉伸*/
高度：100%；/*重要*/
/*最小宽度：100%*/
/*最小高度：100%*/
溢出：隐藏；/*隐藏从div传出的内容*/
/*只是造型吼叫*/
背景：黑色；
颜色：白色；
}
.图像/U支架
{
宽度：100%；
身高：100%；
位置：绝对；/*这很重要，因此div位于文本顶部*/
}
.图片组{
位置：相对；/*重要，因此我们可以使用左缩进或右缩进*/
溢出：隐藏；/*隐藏div之外的内容（这就是我们隐藏图像部分的方式）*/
宽度：50%；/*使其占整个图像的50%*/
身高：100%；
float：左；/*先生成，然后内联*/
}
.右img{
左边距：-100%；/*100%在本例中是图像的50%，因此这就是我们显示图像第二部分的方式*/
}
.清楚{
明确：两者皆有；
}
$（文档）.ready（函数（）{
变量cv、框、支架、cvContext、宽度、高度、my_渐变、boxHeight、boxWidth；
//box=document.getElementById（“box”）；
//boxWidth=box.offsetWidth；
//box高度=box.offsetHeight；
//holder=document.getElementById（“imageHolder”）；
//holder.width=箱宽；
//holder.hight=盒子高度；
box=document.getElementById（“box”）；
//$（“框”）.css（{width:$（window.width（），height:$（window.height（）}）；
$（“box”）.css（{width:window.innerWidth，height:window.innerHeight}）；
$（“imageHolder”）.css（{“最小宽度”：window.innerWidth，“最小高度”：window.innerHeight}）；
cv=document.getElementById（“canvas1”）；
宽度=cv宽度；
高度=cv高度；
cvContext=cv.getContext（“2d”）；
my_gradient=cvContext.createLinearGradient（0，0，宽度，高度）；
my_gradient.addColorStop（0，“蓝色”）；
my_gradient.addColorStop（1，“白色”）；
cvContext.fillStyle=我的梯度；
cvContext.fillRect（0，0，宽度，高度）；
cv=document.getElementById（“canvas2”）；
宽度=cv宽度；
高度=cv高度；
cvContext=cv.getContext（“2d”）；
my_gradient=cvContext.createLinearGradient（0，0，宽度，高度）；
my_gradient.addColorStop（0，“蓝色”）；
my_gradient.addColorStop（1，“白色”）；
cvContext.fillStyle=我的梯度；
cvContext.fillRect（0，0，宽度，高度）；
//当用户将鼠标悬停在包含html的div上时。。。
$（'.box_container'）。悬停（函数（）{
//…我们得到div的宽度并将其除以2。。。
var width=$（this）.outerWidth（）/2；
/*…使用该宽度，我们将图像的左“部分”移动到左“部分”和右“部分”
通过更改其从左侧或右侧缩进到右侧*/
$（this.find（'.left'）.animate（{right:width}，{queue:false，duration:300}）；
$（this.find（'.right'）.animate（{left:width}，{queue:false，duration:300}）；
}，函数（）{
//…当他悬停时，我们使用相同的功能将图像恢复到其起始位置…”
$（this.find（'.left'）.animate（{right:0}，{queue:false，duration:300}）；
$（this.find（'.right'）.animate（{left:0}，{queue:false，duration:300}）；
//…关上它，就这样
});
});
下面的文字
好的，我已经尝试过简化并删除所有css，所以所有的事情都是在代码隐藏中完成的。我正在按建议使用视口。但似乎什么都不管用。事实上，它甚至不再识别悬停 我做错了什么？为什么我不能在装载时改变任何宽度、高度等？为什么我的气垫停止工作了 请帮忙
<!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>
具有一个图像的双滑动门效果
函数MyOnLoad（）{
var-cvContext，my_梯度；
变量宽度、高度、宽度、高度、宽度、宽度、宽度、高度、高度、宽度、高度、宽度；
var divBox=document.getElementById（'divBox'）；
var divHolder=document.getElementById（“divHolder”）；
var divunder=document.getElementById（“divunder”）；
var divDoorLeft=document.getElementById（“divDoorLeft”）；
var divDoorRight=document.getElementById（“divDoorRight”）；
var canvas1=document.getElementById（“canvas1”）；
var canvas2=document.getElementById（“canvas2”）；
widthWin=$（窗口）.width（）；//返回浏览器视口的宽度
heightWin=$（window）.height（）；//返回浏览器视口的宽度
widthDoc=$（document）.width（）；//返回HTML文档的宽度
heightDoc=$（document）.height（）；//返回HTML文档的宽度
宽度=宽度；
高度=高度；
divBox.style.width=宽度；
divBox.style.height=高度；
divBox.style.background=“#AAFFAA”；
divBox.style.position=“相对”；
divBox.style.overflow=“隐藏”；
divBox.style.color=“#ffffffff”；
divHolder.style.width=宽度；
divHolder.style.height=高度；
divHolder.style.background=“#aaaaaff”；
divHolder.style
<div id="underneath" style="height: 400px;">
The text underneath
</div>