abBlock首页 - 导航瞄点定位滚动插件

插件介绍：: abBlock基于jquery实现的导航瞄点定位插件; 设置导航默认是否显示，是否瞄点上下左右的位置吸附，精确的对导航对应内容进行定位，可设置导航默认样式或内容滚动后可改变。同时在滚动页面时可看到当前阅读的导航对应状态，js可以用于检测当前的滚动状态。; 兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。

下载此演示例子：: 百度网盘 ( zip资源包 )|阿里云盘 ( exe资源包 )
GitHub|Gitee

一. 基础使用设置

注意：在网页的头部引用jQuery和abBlock两个必需的js既将jquery和abBlock包含在head标中或位于关闭正文标记之前。请确保在abBlock之前包含jquery前后顺序不能乱。

1. <!doctype html>

2. <html>

3. <head>

4. <meta charset="utf-8">

5. <title>domo-abBlock演示例子</title>

6. <script type="text/javascript" src="js/jquery.min.js"></script>

7. <script type="text/javascript" src="js/jquery.abBlock.min.js"></script>

8. </head>

9. <body>

二. 编写html代码

注意：创建一个div的父层，如此例子的abBlock-box。在其内创建主导航层abBlock-tit，和一个主内容层，如此例子的abBlock-content使用css控制其样式，并按照您的喜好定位。

1. <div class="abBlock-box">

2. <div class="abBlock-tit">

3. <ul>

4. <li><a href="javascript:;" class="on">项目一</a></li>

5. <li><a href="javascript:;">项目二</a></li>

6. <li><a href="javascript:;">项目三</a></li>

7. <li><a href="javascript:;">项目四</a></li>

8. <li><a href="javascript:;">项目五</a></li>

9. <li><a href="javascript:;">项目六</a></li>

10. <li><a href="javascript:;">项目七</a></li>

11. <li><a href="javascript:;">项目八</a></li>

12. </ul>

13. </div>

14. <div class="abBlock-content">

15. <div class="block"><div class="area"><h3>内容区域，项目一</h3></div></div>

16. <div class="block"><div class="area"><h3>内容区域，项目二</h3></div></div>

17. <div class="block"><div class="area"><h3>内容区域，项目三</h3></div></div>

18. <div class="block"><div class="area"><h3>内容区域，项目四</h3></div></div>

19. <div class="block"><div class="area"><h3>内容区域，项目五</h3></div></div>

20. <div class="block"><div class="area"><h3>内容区域，项目六</h3></div></div>

21. <div class="block"><div class="area"><h3>内容区域，项目七</h3></div></div>

22. <div class="block"><div class="area"><h3>内容区域，项目八</h3></div></div>

23. </div>

24. </div>

三. 编写例子css样式

注意：编写 html 和 css 样式时一定要注意，主内容容器元素层，都必须具有宽度和高度，jquery.abBlock-v1.5.min.js 才能正常的工作。

1. <style type="text/css">

2. * { margin:0; padding:0; }

3. body { background:#fff; font-size:12px; }

4. ul,li { list-style:none; }

5. p { word-wrap:break-word; }

6. img { border:0; vertical-align:middle; }

7. a { color:#333; text-decoration:none; }

8. a:hover { color:#1974A1; text-decoration:none; }

9. /* abBlock-tit为主导航层，添加调用时需要用到此处的class名 */

10. .abBlock-tit { width:100%; height:54px; background:#3dc878; }

11. .abBlock-tit ul { width:880px; height:54px; margin:auto; }

12. .abBlock-tit ul li { float:left; list-style:none; width:100px; line-height:54px; text-align:center; }

13. .abBlock-tit ul li a { font-size:14px; font-weight:500; color:#fff; text-decoration:none; display:block; }

14. .abBlock-tit ul li a:hover, .abBlock-tit ul li a.on { color:#000; background:#fff; }

15. .abBlock-tit-on { background:#0c91e8; }

16. .abBlock-content { width:880px; margin:auto; }

17. /* .abBlock-content .block为主内容层，添加调用时需要用到此处的class名 */

18. .abBlock-content .block { margin-top:30px; }

19. .abBlock-content .block h3 { font-size:20px; font-weight:500; line-height:200px; padding-left:30px;

20. background:#fff; }

21. .abBlock-content .block .area { height:800px; background:#fff; }

22. </style>

四. 调用参数的设置

注意：在要使用效果的div父层abBlock-box外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，或放置在一个统一的js文件里面引用，方便维护与管理。

1. <script type="text/javascript">

2. $("body").abBlock({

3. tit: ".abBlock-tit ul li a", /* 默认导航列表项元素 */

4. titContainer: ".abBlock-tit", /* 导航容器，(tit)列表主导航 */

5. block: ".abBlock-content .block", /* 内容板块，(tit)列表项对应内容项元素 */

6. onClass: "abBlock-tit-on", /* 容器吸顶时(titContainer)的class样式名 */

7. titOnClass: "on", /* tit列表项当前索引class高亮的样式名 */

8. speed: 250 /* 滚动过度动画毫秒(ms) */

9. });

10. </script>

11. </body>

12. </html>

返回首页|综合下载

abBlock基于jquery实现的导航瞄点定位插件

Top