jquery实现满屏切换功能

最新推荐文章于 2024-06-03 10:01:49 发布

转载最新推荐文章于 2024-06-03 10:01:49 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Timac/archive/2011/08/31/2160469.html

文章标签：

#xhtml #javascript #ViewUI

本文介绍了一种使用HTML、CSS及jQuery实现的全屏网页左右切换效果，详细讲解了通过屏幕分辨率动态调整页面布局的方法，并解决了在不同浏览器下可能出现的横向滚动条问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;
}

这里有几个要点:

全屏的实现：

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

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

转载于:https://www.cnblogs.com/Timac/archive/2011/08/31/2160469.html