jquery实现满屏切换功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向滚动</title>
<link href="main.css" rel="stylesheet" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//$('.right').hide();
$('.clickright').hide();
var w=screen.width;
var h=screen.height;
var left=$(".left");
var right=$(".right");
$('.left,.right').css("height",h);/*解决在IE6下高度不能铺满全屏*/
$('.clickleft').click(function(){
//alert(width);
left.animate({marginLeft:+w},1000);
left.css("z-index","-5");
right.css({"z-index":"-8","margin-left":"0"});
//left.hide();
//$('.right').show();
//left.appendTo(right);
$(this).hide();
$('.clickright').show();
});
$('.clickright').click(function(){
//alert(width);
left.css({"z-index":"-10","margin-left":"0"});
right.animate({marginLeft:-w},1000);
$('.clickleft').show();
$(this).hide();
});
});
</script>
</head>
<body>
<div class="outMain">
<div class="left">left</div>
<div class="right">right</div>
</div>
<a href="#" class="clickleft">left</a>
<a href="#" class="clickright">right</a>
</body>
</html>
以上全屏代码；css代码：
@charset "utf-8";
/* CSS Document */
*{
padding:0;
margin:0;
}
ul li{
list-style:none;
}
html{
overflow:hidden;/*解决在IE6中有横向滚动条*/
}
body{
overflow:hidden;/*解决横向滚动条问题*/
}
/*.outMain{
overflow-x:hidden;
position:relative;
}*/
.left{
text-align:center;
position:absolute;
background:#CCC;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.right{
text-align:center;
position:absolute;
background:#FC9;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
}
a.clickleft{
display:block;
text-decoration:none;
background:#099;
position:absolute;
z-index:2;
color:#FFF;
top:300px;
left:0;
}
a.clickright{
display:block;
text-decoration:none;
background:#09F;
position:absolute;
z-index:5;
color:#FFF;
top:300px;
right:0;
}
/* CSS Document */
*{
padding:0;
margin:0;
}
ul li{
list-style:none;
}
html{
overflow:hidden;/*解决在IE6中有横向滚动条*/
}
body{
overflow:hidden;/*解决横向滚动条问题*/
}
/*.outMain{
overflow-x:hidden;
position:relative;
}*/
.left{
text-align:center;
position:absolute;
background:#CCC;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
z-index:1;
}
.right{
text-align:center;
position:absolute;
background:#FC9;
width:100%;
height:100%;
top:0;
left:0;
right:0;
bottom:0;
}
a.clickleft{
display:block;
text-decoration:none;
background:#099;
position:absolute;
z-index:2;
color:#FFF;
top:300px;
left:0;
}
a.clickright{
display:block;
text-decoration:none;
background:#09F;
position:absolute;
z-index:5;
color:#FFF;
top:300px;
right:0;
}
这里有几个要点:
全屏的实现：
关键点一：在js里面应用screen.width;方法获取当前浏览器屏幕的分辨率的宽度；同理获取高度的方法为screen.height;这样就实现不同屏幕同样能实现全屏切换；
关键点二：在用到left.animate({marginLeft:+w},1000);这个方法时，切换后会有横向滚动条的；这时要在css样式定义定义属性overflow：hidden；在非ie6浏览器中只要对body{over：hidden；}就可以实现；
但在该死的ie6里面要加上html{overf：hidden；}才能兼容；
关
键点三：这个实例里面有四个div分别是：向左按钮（调用样式为clickleft），向右按钮（调用样式clickright），以及左边div（调用
样式left），右边div（调用样式right）；这四个div的相对位置要同个z-index属性来对它们的位置进行微妙的变化；
这是我第一次发表的文章；希望对大家有用，还有很多不足呵呵，要大家提出。
