特效描述：基于jquery实现 页面视差 滚动切换。基于jquery实现页面视差滚动切换
代码结构
1. 引入CSS
<link href="css/global.css" rel="stylesheet" type="text/css"> <link href="css/global.css" rel="stylesheet" type="text/css">
2. 引入JS
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script> <script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script> <script src="js/default.js" type="text/javascript"></script> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script> <script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script> <script src="js/default.js" type="text/javascript"></script>
3. HTML代码
<!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="css/global.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
</head>
<body id="default">
<div class="pageWidth" id="box_root">
<!-- 头部导航开始 -->
<div id="nav">
<a href="index.html" title="返回引导页" class="logo_a">前端素材</a>
<ul id="menu">
<li class="" id="mn_home">
<a href="index.html#home">网站首页</a>
</li>
<li id="mn_about" class="selected">
<a href="index.html#about">前端素材</a>
</li>
<li id="mn_news">
<a href="index.html#news">新闻资讯</a>
</li>
<li id="mn_products" class="">
<a href="index.html#products">核心项目</a>
</li>
<li id="mn_chanye" class="">
<a href="index.html#sector">产业板块</a>
</li>
<li id="mn_about" class="">
<a href="index.html#famous">名家寄语</a>
</li>
<li class="last" id="mn_contact">
<a href="index.html#contact">联系我们</a>
</li>
</ul>
</div>
<div class="top_rim">
<a href="index.html#home">回到顶部</a>
</div>
<!-- 头部导航结束 -->
<div id="box_main">
<div id="home" style="background-position: 50% -110px;">
<div class="sprite1" style="background-position: 50% 550px;"></div>
<div class="sprite" style="background-position: 50% 0px;"></div>
<div class="screen"></div>
</div>
<div id="about" style="background-position: 50% -110px;">
<div class="contents">
<div class="about_rim">
<div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="说明页">
<!-- 装饰器样式开始 -->
<div class="border_05">
<div class="border_05-topr">
<div class="border_05-topl">
</div>
</div>
<div class="border_05-mid">
<div class="borderContent"><div id="FrontSpecifies_show01-1367889271850" class="FrontSpecifies_show01-d3_c1"><div class="comptitle_05"><em><span class="extendLink"><a href="index.html#about_cont" target="_self">更多详情 +</a></span></em></div><div class="describe htmledit">
<div class="about_txt">
</div></div>
</div>
<div class="clearBoth"></div></div>
</div>
</div>
<!-- 装饰器样式结束 -->
</div>
</div>
</div>
<div class="sprite" style="background-position: 50% 0px;"></div>
<div class="screen" style="background-position: 50% 550px;"></div>
</div>
<div id="about_cont" style="background-position: 50% 0px;">
<div class="contents">
<div class="about_rim">
<p>关于我们</p>
</div>
</div>
<div class="sprite" style="background-position: 50% 0px;"></div>
<div class="screen" style="background-position: 50% 550px;"></div>
<div class="screen1" style="background-position: 50% 110px;"></div>
</div>
<div id="news" style="background-position: 50% -110px;">
<div class="contents">
<div id="box_news">
<p>新闻资讯</p>
</div>
</div>
</div>
<div id="products" style="background-position: 50% -110px;">
<div class="pro_list">
<p>核心项目</p>
</div>
<div class="sprite" style="background-position: 50% 0px;"></div>
<div class="screen" style="background-position: 50% 220px;"></div>
</div>
<div id="sector" style="background-position: 50% -110px;">
<div class="contents">
<div class="sector_img">
<p>产业模块</p>
</div>
</div>
<div class="screen" style="background-position: 50% 550px;"></div>
<div class="sprite" style="background-position: 50% 0px;"></div>
</div>
<div id="famous" style="background-position: 50% -90px;">
<div class="contents">
<div class="famous_rim">
<p>名家寄语</p>
</div>
</div>
<div class="sprite" style="background-position: 50% 450px;"></div>
</div>
<div id="contact">
<div class="contents">
<div id="box_contact">
<div class="columnSpace" id="elem-FrontSpecifies_show01-1368432548167" name="说明页">
<div id="FrontSpecifies_show01-1368432548167" class="FrontSpecifies_show01-d3_c1"><div class="describe htmledit">
</div>
</div>
</div>
</div>
</div>
<div class="sprite" style="background-position: 50% 0px;"></div>
<div class="screen"></div>
</div>
</div>
</div>
</body>
</html>
