分享一款页面视差滚动切换jquery.localscroll插件

今天给大家分享一款页面视差滚动切换jquery.localscroll插件。 滚动鼠标液动条看下页面的切换效果。该插件适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

html代码：

 

[html]  view plain copy print ?

 

1. <div class="pageWidth" id="box_root">  
2.         <!-- 头部导航开始 -->  
3.         <div id="nav">  
4.             <a href="index.html" title="返回引导页" class="logo_a">站长素材</a>  
5.             <ul id="menu">  
6.                 <li class="" id="mn_home"><a href="index.html#home">网站首页</a> </li>  
7.                 <li id="mn_about" class="selected"><a href="index.html#about">站长素材</a> </li>  
8.                 <li id="mn_news"><a href="index.html#news">新闻资讯</a> </li>  
9.                 <li id="mn_products" class=""><a href="index.html#products">核心项目</a> </li>  
10.                 <li id="mn_chanye" class=""><a href="index.html#sector">产业板块</a> </li>  
11.                 <li id="mn_about" class=""><a href="index.html#famous">名家寄语</a> </li>  
12.                 <li class="last" id="mn_contact"><a href="index.html#contact">联系我们</a> </li>  
13.             </ul>  
14.         </div>  
15.         <div class="top_rim">  
16.             <a href="index.html#home">回到顶部</a>  
17.         </div>  
18.         <!-- 头部导航结束 -->  
19.         <div id="box_main">  
20.             <div id="home" style="background-position: 50% -110px;">  
21.                 <div class="sprite1" style="background-position: 50% 550px;">  
22.                 </div>  
23.                 <div class="sprite" style="background-position: 50% 0px;">  
24.                 </div>  
25.                 <div class="screen">  
26.                 </div>  
27.             </div>  
28.             <div id="about" style="background-position: 50% -110px;">  
29.                 <div class="contents">  
30.                     <div class="about_rim">  
31.                         <div class="columnSpace" id="elem-FrontSpecifies_show01-1367889271850" name="说明页">  
32.                             <!-- 装饰器样式开始 -->  
33.                             <div class="border_05">  
34.                                 <div class="border_05-topr">  
35.                                     <div class="border_05-topl">  
36.                                     </div>  
37.                                 </div>  
38.                                 <div class="border_05-mid">  
39.                                     <div class="borderContent">  
40.                                         <div id="FrontSpecifies_show01-1367889271850" class="FrontSpecifies_show01-d3_c1">  
41.                                             <div class="comptitle_05">  
42.                                                 <em><span class="extendLink"><a href="index.html#about_cont" target="_self">更多详情 +</a></span></em></div>  
43.                                             <div class="describe htmledit">  
44.                                                 <div class="about_txt">  
45.                                                 </div>  
46.                                             </div>  
47.                                         </div>  
48.                                         <div class="clearBoth">  
49.                                         </div>  
50.                                     </div>  
51.                                 </div>  
52.                             </div>  
53.                             <!-- 装饰器样式结束 -->  
54.                         </div>  
55.                     </div>  
56.                 </div>  
57.                 <div class="sprite" style="background-position: 50% 0px;">  
58.                 </div>  
59.                 <div class="screen" style="background-position: 50% 550px;">  
60.                 </div>  
61.             </div>  
62.             <div id="about_cont" style="background-position: 50% 0px;">  
63.                 <div class="contents">  
64.                     <div class="about_rim">  
65.                         <p>  
66.                             关于我们</p>  
67.                     </div>  
68.                 </div>  
69.                 <div class="sprite" style="background-position: 50% 0px;">  
70.                 </div>  
71.                 <div class="screen" style="background-position: 50% 550px;">  
72.                 </div>  
73.                 <div class="screen1" style="background-position: 50% 110px;">  
74.                 </div>  
75.             </div>  
76.             <div id="news" style="background-position: 50% -110px;">  
77.                 <div class="contents">  
78.                     <div id="box_news">  
79.                         <p>  
80.                             新闻资讯</p>  
81.                     </div>  
82.                 </div>  
83.             </div>  
84.             <div id="products" style="background-position: 50% -110px;">  
85.                 <div class="pro_list">  
86.                     <p>  
87.                         核心项目</p>  
88.                 </div>  
89.                 <div class="sprite" style="background-position: 50% 0px;">  
90.                 </div>  
91.                 <div class="screen" style="background-position: 50% 220px;">  
92.                 </div>  
93.             </div>  
94.             <div id="sector" style="background-position: 50% -110px;">  
95.                 <div class="contents">  
96.                     <div class="sector_img">  
97.                         <p>  
98.                             产业模块</p>  
99.                     </div>  
100.                 </div>  
101.                 <div class="screen" style="background-position: 50% 550px;">  
102.                 </div>  
103.                 <div class="sprite" style="background-position: 50% 0px;">  
104.                 </div>  
105.             </div>  
106.             <div id="famous" style="background-position: 50% -90px;">  
107.                 <div class="contents">  
108.                     <div class="famous_rim">  
109.                         <p>  
110.                             名家寄语</p>  
111.                     </div>  
112.                 </div>  
113.                 <div class="sprite" style="background-position: 50% 450px;">  
114.                 </div>  
115.             </div>  
116.             <div id="contact">  
117.                 <div class="contents">  
118.                     <div id="box_contact">  
119.                         <div class="columnSpace" id="elem-FrontSpecifies_show01-1368432548167" name="说明页">  
120.                             <div id="FrontSpecifies_show01-1368432548167" class="FrontSpecifies_show01-d3_c1">  
121.                                 <div class="describe htmledit">  
122.                                 </div>  
123.                             </div>  
124.                         </div>  
125.                     </div>  
126.                 </div>  
127.                 <div class="sprite" style="background-position: 50% 0px;">  
128.                 </div>  
129.                 <div class="screen">  
130.                 </div>  
131.             </div>  
132.         </div>  
133.     </div>  

 

 

其他精彩文章

jQuery教程(29)-jQuery插件开发之为插件方法指定参数

jQuery教程(28)-jQuery插件开发之使用插件

jQuery教程(27)-jQueryajax操作之修改默认选项

jQuery教程(26)-ajax操作之使用JSONP加载远程数据

jQuery教程(25)-ajax操作之安全限制

 

更多关于android开发文章