素材牛VIP会员

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

 所属分类:网页特效-导航菜单,滑动导航

 浏览:299次  评论:0次  更新时间:2023-02-11
牛币素材VIP可免积分下载
基于jquery实现的导航瞄点定位插件abBlock
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:设置导航默认是否显示,是否瞄点上下左右的位置吸附,精确的对导航对应内容进行定位,可设置导航默认样式或内容,滚动后变换样式或内容。同时在滚动页面时可看到当前阅读的导航对应状态。兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。

详细介绍

使用说明以及注意事项如下:

1、首先引用jQuery v1.8.3+版本 ( 更低版本能兼容到jQuery1.43推荐使用jQuery1.8.3+ )

jQuery目录地址  js/jquery-1.8.3.min.js

2、引用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, /* [false|string|integer],定点位置。当滚动条滚动到该(元素或指定滚动高)的位置时,显示 resContainer 容器元素 */    
"onClass": false, /* 容器吸顶时(titContainer)的class样式名 */    
"offClass": false, /* 容器吸顶前(titContainer)的class样式名 */    
"titOnClass": "on", /* tit列表项当前索引class样式名 */    
"speed": 250, /* 滚动过度动画毫秒(ms) */    
"callback": null, /* 回调函数 */

文件目录结构

  • demo
    • a
      • ┝ abBlock-a-bottom-01.html
      • ┝ abBlock-a-left-01.html
      • ┝ abBlock-a-right-01.html
      • ┝ abBlock-a-top-01.html
    • b
      • ┝ abBlock-b-bottom-01.html
      • ┝ abBlock-b-left-01.html
      • ┝ abBlock-b-right-01.html
      • ┝ abBlock-b-top-01.html
    • c
      • ┝ abBlock-c-top-01.html
      • ┝ abBlock-c-top-02.html
    • css
      • ┝ abBlock-demo-common.css
    • d
      • ┝ abBlock-d-bottom-01.html
      • ┝ abBlock-d-left-01.html
      • ┝ abBlock-d-right-01.html
      • ┝ abBlock-d-top-01.html
    • e
      • ┝ abBlock-e-bottom-01.html
      • ┝ abBlock-e-left-01.html
      • ┝ abBlock-e-right-01.html
      • ┝ abBlock-e-top-01.html
    • f
      • ┝ abBlock-f-top-01.html
      • ┝ abBlock-f-top-02.html
  • ┝ index.html
  • js
    • ┝ abBlock-v1.4.js
    • ┝ jquery-1.8.3.min.js
    • ┝ jquery.abBlock-v1.4.min.js
  • ┝ 使用说明.txt

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:15 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)