jQuery全页面横向定位滚屏特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery全页面横向定位滚屏特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-CN">
<title>jQuery全页面横向定位滚屏</title>
<link href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>

	<div id="content">


			<dl id="art1" class="article">
				<dt><em>01</em>作者声明</dt>
				<dd>
						<div class="con">
						<p>jquery横向定位滚屏特效代码,是个人业余兴趣爱好写的，是基于jquery一个特效，没有任何封装，只是提供一种思考方式和实现方法，代码共享可随便使用，可能存在bug，但本人不承担任何修复bug的责任。</p>
							<p>测试支持 ie6-10、chrome、ff 等主流浏览器，其它没测试过</p>
						</div>
				</dd>
				
			</dl>

			<dl id="art2" class="article">
				<dt><em>02</em>电影新闻</dt>
				<dd>
						<div class="con">
							<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝，终使得它被搬上小荧屏，却炮制出了瑰丽如电影的史诗之作。紧接着，它创造高收视，成为金球与艾美的常客，以大投资获得大回报，更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来，第一季的浩瀚铺陈，第二季的华丽发展，至今年第三季的彪悍回归，HBO缔造了美剧史上的一段奇迹，赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞，以及活色生香的情色场面，使得它光彩熠熠，且一直呈“渐入佳境”的趋势。</p>
							<p>如今《权力的游戏》带着它浩荡的异鬼军团，以及错综复杂的人际关系脉络，再次让观众一同见证辉煌，以彰显其恢弘与细腻，美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”，解读它的伟大，并且一同期待它华丽的后续吧！</p>
							<p>这场“权力的游戏”，观众将奉陪到底！本专题将图解“冰火”数字图腾，换个轻松的角度，迎接冰火的回归。</p>
						</div>
				</dd>
				
			</dl>

			<dl id="art3" class="article">
				<dt><em>03</em>人物新闻</dt>
				<dd>
						<div class="con">
							<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝，终使得它被搬上小荧屏，却炮制出了瑰丽如电影的史诗之作。紧接着，它创造高收视，成为金球与艾美的常客，以大投资获得大回报，更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来，第一季的浩瀚铺陈，第二季的华丽发展，至今年第三季的彪悍回归，HBO缔造了美剧史上的一段奇迹，赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞，以及活色生香的情色场面，使得它光彩熠熠，且一直呈“渐入佳境”的趋势。</p>
							<p>如今《权力的游戏》带着它浩荡的异鬼军团，以及错综复杂的人际关系脉络，再次让观众一同见证辉煌，以彰显其恢弘与细腻，美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”，解读它的伟大，并且一同期待它华丽的后续吧！</p>
							<p>这场“权力的游戏”，观众将奉陪到底！本专题将图解“冰火”数字图腾，换个轻松的角度，迎接冰火的回归。</p>
						</div>
				</dd>
				
			</dl>

			<dl id="art4" class="article">
				<dt><em>04</em>电视新闻</dt>
				<dd>
						<div class="con">
							<p>乔治·R·R·马丁用一部奇幻巨著笼络了亿万粉丝，终使得它被搬上小荧屏，却炮制出了瑰丽如电影的史诗之作。紧接着，它创造高收视，成为金球与艾美的常客，以大投资获得大回报，更吊足了“冰火迷”的胃口。自2011年暖春推出《权力的游戏》以来，第一季的浩瀚铺陈，第二季的华丽发展，至今年第三季的彪悍回归，HBO缔造了美剧史上的一段奇迹，赢得口碑与收视的大高潮。七国争战的壮烈、宫廷权谋的迂回、人性与兽性的激烈碰撞，以及活色生香的情色场面，使得它光彩熠熠，且一直呈“渐入佳境”的趋势。</p>
							<p>如今《权力的游戏》带着它浩荡的异鬼军团，以及错综复杂的人际关系脉络，再次让观众一同见证辉煌，以彰显其恢弘与细腻，美丽与残酷。让我们在此用图解的形式回溯这部神作的“前世今生”，解读它的伟大，并且一同期待它华丽的后续吧！</p>
							<p>这场“权力的游戏”，观众将奉陪到底！本专题将图解“冰火”数字图腾，换个轻松的角度，迎接冰火的回归。</p>
						</div>
				</dd>
				
			</dl>

			<div class="sideGuide">
				<s class="bg"></s>
				<s class="curBg"></s>
				<ul>
					<li class="on"><a href="javascript:void(0)">作者声明</a></li>
					<li><a href="javascript:void(0)">电影新闻</a></li>
					<li><a href="javascript:void(0)">人物新闻</a></li>
					<li><a href="javascript:void(0)">电视新闻</a></li>
				</ul>
			</div>


<script type="text/javascript"> 
(function($){

	var goTo = $(".article");
	var guide = $(".sideGuide");
	var guideLi = $(".sideGuide li");
	var curBg = $(".sideGuide .curBg");

	var index=0;
	var direct=0; 
	
	//设置宽高
	var resetFun = function(){ goTo.each(function(){  $(this).height( $(window).height() ),  $(this).width( $(window).width()+20 ) }); }
	resetFun();

	//屏幕滚动
	var goToFun = function(){ 
		 direct=0; 
		if(index<0){  index=guideLi.size()-1 }
		if(index>=guideLi.size()){ index=0 }
		curBg.stop().animate({ left:curBg.width()*index },300,"swing");
		$("html,body").stop().animate({ scrollLeft:( ($(window).width()+20) *index ) },300,"swing",function(){ direct=0;  });
		guideLi.removeClass("on").eq(index).addClass("on");
	}
	
	guideLi.each(function(i){
		$(this).hover( function(){ index=guideLi.index( $(this) ); goToFun(); },function(){} );
	});

	$(window).resize(function(){ resetFun() });

	/* 滚轮事件 */ 
	var scrollFunc=function(e){ 
		e=e || window.event; 
		if(e.wheelDelta){ direct+= (-e.wheelDelta/120); }else if(e.detail){ direct+=e.detail/3 ; } 

		if( direct>=8 ){ goToFun( index++ ) }
		if( direct<=-8 ){ goToFun( index-- ) }
	} 
	if( document.addEventListener){ document.addEventListener('DOMMouseScroll',scrollFunc,false); }
	 window.onmousewheel=document.onmousewheel=scrollFunc; 

})(jQuery);
</script>
	</div>
</body>
</html>

CSS代码(style.css):

/* css ���� */
*{margin:0;padding:0;list-style:none;}
body{color:#333;font:14px/150% "Microsoft YaHei",Arial,"����",sans-serif;text-align:center;background:#DCDCDC;}
img{border:0;}
a{text-decoration:none;color:#333;}
a:hover{text-decoration:underline;}
/* ���������� - ������ */
#header{position:fixed;_position:absolute;z-index:1;top:0;left:0;width:100%;height:32px;line-height:30px;color:#fff;text-align:left;overflow:hidden;background:#333;_left:expression(eval(document.documentElement.scrollLeft))}
#header span{float:right;padding-right:20px;}
#header span a{margin:0 10px;color:#fff;text-decoration:underline;}
#header h1{padding:0 10px;font-size:14px;float:left;}
#header .change{text-align:center;position:absolute;top:0;left:50%;width:280px;margin-left:-140px;height:32px;}
#header .change a{color:#fff;display:inline-block;*display:inline;zoom:1;padding:0 10px;background:#666;height:32px;line-height:32px;margin:0 5px;}
#header .change a:hover{text-decoration:none;color:#ff0;}
#header .change a.on{background:#e60;}
#footer{height:34px;line-height:34px;}
html{overflow-x:hidden;overflow-y:hidden;_background-image:url(about:blank);_background-attachment:fixed;}
/* html������δ�������ȡ��ie6����ʱ��Ԫ����bug */
#content{overflow:hidden;width:1000%;}
.article{background:#04caca;text-align:left;float:left;}
.article dt{width:60%;padding-top:50px;margin:auto;font:normal 40px/200% "Microsoft YaHei";color:#fff;text-shadow:1px 1px 1px #666;}
.article dt em{font:italic 80px/150% Verdana;margin-right:10px;}
.article dd{position:relative;z-index:1;width:60%;margin:20px auto 0 auto;}
.article dd .con{position:relative;z-index:1;padding:30px;font:normal 16px/200% "Microsoft YaHei";color:#fff;}
.article dd .con p{text-indent:24px;margin-bottom:20px;}
#art2{background:#7eb906;}
#art3{background:#d68432;}
#art4{background:#aa89d8;}
.sideGuide{position:fixed;z-index:1;left:50%;bottom:70px;width:400px;margin-left:-200px;_position:absolute;_left:expression(eval(document.documentElement.scrollLeft+document.documentElement.offsetWidth/2))}
/* ˼��������Ϊ�˵���ƽ���ع�������������expression */
.sideGuide ul{zoom:1;position:relative;}
.sideGuide .bg{position:absolute;top:0;left:0;width:100%;height:32px;background:#000;filter:alpha(opacity=50);opacity:0.5;}
.sideGuide .curBg{position:absolute;top:0;left:0;width:100px;height:32px;background:#e60;}
.sideGuide li{width:100px;float:left;height:32px;line-height:32px;position:relative;}
.sideGuide li a{display:block;color:#fff;}
.sideGuide li a:hover{text-decoration:none;color:#fff;}

附件:下载该文件资源,减少时间成本(增值服务)