导航瞄点定位滚动插件abBlock(原创)
本帖最后由 小麦子 于 2024-12-12 12:15 编辑使用说明以及注意事项如下：1、首先引用jQuery v1.8.3+版本 ( 更低版本能兼容到jQuery1.43推荐使用jQuery1.8.3+ )jQuery目录地址js/jquery-1.8.3.min.js2、引用abBlock插件目录地址如下js/abBlock-v1.4.js 开发版js/jquery.abBlock-v1.4.min.js 压缩迷你版（推荐使用）3、demo目录内为演示实例相关文件--------------------------------------------------------------------------------------------------------------------------------------- 4、调用相关参数说明 "scroll": "html,body", /* 父容器元素 */
"tit": false, /* tit默认导航列表项元素 */
"titContainer": "", /* 导航容器，(tit)列表项父容器元素 */
"block": false, /* 内容板块，(tit)列表项对应内容项元素 */
"stickType": "left", /* 水平方向(默认=left): left=靠左, right=靠右 */
"positionType": 1, /* 方位: 1=顶部, 2=垂直居中, 3=底部 */
"offsetY": 0, /* Y坐标偏移 */
"offsetX": 0, /* X坐标偏移 */
"appoint": false, /* ，定点位置。当滚动条滚动到该(元素或指定滚动高)的位置时，显示 resContainer 容器元素 */
"onClass": false, /* 容器吸顶时(titContainer)的class样式名 */
"offClass": false, /* 容器吸顶前(titContainer)的class样式名 */
"titOnClass": "on", /* tit列表项当前索引class样式名 */
"speed": 250, /* 滚动过度动画毫秒(ms) */
"callback": null, /* 回调函数 */完整版本：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>abBlock演示实例分类列表 - 格晒特效插件</title>
<meta name="keywords" content="abBlock,abBlock下载,格晒特效,格晒插件,jQuery插件" />
<meta name="description" content="格晒js特效插件abBlock.js是一款非常有用的js插件基于jQuery运行，它可以通过设置导航视图来精确的对页面中每个章节的内容进行导航。同时你在滚动页面的时候还可以看到当前阅读的章节处于什么状态。js可以用于检测当前的滚动状态。兼容IE6+ Safari Opera Firefox Chrome 等大部分浏览器。" />
<link href="https://www.jq22.com/demo/abBlock202302082209/demo/css/abBlock-demo-common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- ==============================css 开始 ============================== -->
<style type="text/css">
.demo-body { width:760px; height:320px; margin:0 auto; }
.demo-js-area { margin:0 auto 100px auto; width:880px; font-size:12px; color:#29c; }
.demo-main { text-align:center; }
.mddw-body { width:880px; margin:0 auto; background:#fff;border-radius:50px;box-shadow:0 6px 20px #107cc3; }
.demo-main h4 { text-align:center; font-size:24px; height:90px; line-height:50px; font-weight:700; letter-spacing:.05em; font-style:italic; color:#183b52; }
.abBlock-view-nav { font-style:italic; }
.abBlock-view-nav dl { padding-bottom:20px; color:#183b52; }
.abBlock-view-nav dt { font-size:14px; height:40px; line-height:40px; font-style:italic; font-weight:700;text-indent:2em; }
.abBlock-view-nav dt.bh1 { color:#09c; text-align:left; }
.abBlock-view-nav dt.bh2 { color:#79ac13; text-align:left; }
.abBlock-view-nav dt.bh3 { color:#c4c; text-align:left; }
.abBlock-view-nav dd { font-size:14px; color:#183b52; font-weight:500; }
.abBlock-view-nav dd span { font-style:italic; font-size:14px; padding-right:5px; color:#aaa; }
.abBlock-view-nav a { font-style:normal; text-decoration:none; color:#555; padding:0 15px; }
.abBlock-view-nav a:hover { text-decoration:none; color:#4ad585; }
.abBlock-view-nav .line22 { border-bottom:1px solid #292929; padding-bottom:30px; margin-bottom:30px; }
</style>
<!-- ==============================css 结束 ============================== -->
<!-- 头部开始 -->
<div style="text-align:center;padding:80px 0 20px 0;"><div class="logo z"><h2 style="color:#ebf7fe;font-size:38px;line-height:50px;font-weight:bold;font-style:italic;"><a href="http://ab.geshai.com/other-plus/abBlock" title="abBlock v1.4" target="_blank">abBlock</a></h2><p style="font-size:13px;font-style:italic;color:#ddf0fb;">导航定位滚动插件 v1.4</p></div></div><div class="clear"></div>
<!-- 头部结束 -->
<div class="demo-main">
<div class="h50"></div>
<div class="demo-js-area">
<h4>一. 瞄点定位，滚动演示</h4>
<div class="mddw-body"><div style="text-align:center; font-size:18px; line-height:30px; padding:30px;">
<div class="abBlock-view-nav">
<dl class="line2">
<dt class="bh1">默认显示导航</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/a/abBlock-a-top-01.html" target="_blank"><span>①</span>顶部吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/a/abBlock-a-left-01.html" target="_blank"><span>②</span>左侧吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/a/abBlock-a-right-01.html" target="_blank"><span>③</span>右侧吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/a/abBlock-a-bottom-01.html" target="_blank"><span>④</span>底部吸附瞄点定位实例</a></dd>
</dl>
<dl>
<dt class="bh1">默认不显示导航</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/b/abBlock-b-top-01.html" target="_blank"><span>①</span>顶部吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/b/abBlock-b-left-01.html" target="_blank"><span>②</span>左侧吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/b/abBlock-b-right-01.html" target="_blank"><span>③</span>右侧吸附瞄点定位实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/b/abBlock-b-bottom-01.html" target="_blank"><span>④</span>底部吸附瞄点定位实例</a></dd>
</dl>
<dl>
<dt class="bh2">变换导航实例</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/c/abBlock-c-top-01.html" target="_blank"><span>①</span>滚动后改变导航样式，瞄点定位，滚动实例。</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/c/abBlock-c-top-02.html" target="_blank"><span>②</span>滚动后改变导航内容，瞄点定位，滚动实例。</a></dd>
</dl>
</div>
</div></div>
<div class="h100"></div><div class="h50"></div>
<h4>二. 不瞄点定位，滚动演示</h4>
<div class="mddw-body"><div style="text-align:center; font-size:18px; line-height:30px; padding:30px;">
<div class="abBlock-view-nav">
<dl class="line2">
<dt class="bh1">默认显示导航</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/d/abBlock-d-top-01.html" target="_blank"><span>①</span>顶部吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/d/abBlock-d-left-01.html" target="_blank"><span>②</span>左侧吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/d/abBlock-d-right-01.html" target="_blank"><span>③</span>右侧吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/d/abBlock-d-bottom-01.html" target="_blank"><span>④</span>底部吸附导航滚动实例</a></dd>
</dl>
<dl>
<dt class="bh1">默认不显示导航</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/e/abBlock-e-top-01.html" target="_blank"><span>①</span>顶部吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/e/abBlock-e-left-01.html" target="_blank"><span>②</span>左侧吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/e/abBlock-e-right-01.html" target="_blank"><span>③</span>右侧吸附导航滚动实例</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/e/abBlock-e-bottom-01.html" target="_blank"><span>④</span>底部吸附导航滚动实例</a></dd>
</dl>
<dl>
<dt class="bh3">变换导航实例</dt>
<dd><a href="https://www.jq22.com/demo/abBlock202302082209/demo/f/abBlock-f-top-01.html" target="_blank"><span>①</span>滚动后改变导航样式，不瞄点定位，滚动实例。</a><a href="https://www.jq22.com/demo/abBlock202302082209/demo/f/abBlock-f-top-02.html" target="_blank"><span>②</span>滚动后改变导航内容，不瞄点定位，滚动实例。</a></dd>
</dl>
</div>
</div> </div></div>
<div class="clear"></div>
<div class="clear"></div><div class="h100"></div><div class="clear"></div>
<!--<div class="demo-tit"><h3><a href="index.html" target="_blank">返回首页</a><span class="a2">|</span><a href="index.html" target="_blank">插件下载</a></h3></div>-->
<div class="demo-text">
<h6>abBlock基于jquery实现的导航瞄点定位插件</h6>
<p>设置导航默认是否显示，是否瞄点上下左右的位置吸附，精确的对导航对应内容进行定位，可设置导航默认<br>样式或内容，滚动后变换样式或内容。同时在滚动页面时可看到当前阅读的导航对应状态。<br>兼容IE6+ Safari Opera Firefox Chrome</span>等大部分浏览器。</p>
</div>
<div id="tbox2"><a id="gotop2" title="返回顶部" href="javascript:scroll(0,0);">Top</a></div>
</div>
</body>
</html>
页:
[1]