横向滚动

$(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();

});

});

left

right

以上全屏代码；

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;

}

这里有几个要点:

全屏的实现：

关键点一：在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属性来对它们的位置进行微妙的变化；

这是我第一次发表的文章；希望对大家有用，还有很多不足呵呵，要大家提出。