首页 > Web开发 > 详细

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

时间：2015-01-20 02:15:14      阅读：445      评论：0      收藏：0      [点我收藏+]

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

bubuko.com,布布扣

在线预览???源码下载

实现的代码。

html代码：

?

[html]?view plaincopyprint?bubuko.com,布布扣bubuko.com,布布扣
?
  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加载远程数据

?

更多关于android开发文章

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

原文：http://aijuans.iteye.com/blog/2177300
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！