鼠标滚动导航变色
1 <script> 2 $(function(){ 3 var $wrap = $('.api-wrap'), 4 $nav = $('.api-nav'), 5 e; 6 7 var $h = $wrap.find('h3[data-id]'); 8 var $a = $nav.find('a'); 9 10 $nav.on('click', 'a', function(){ 11 var index = $(this).index(); 12 var left = $($h[index]).offset().left; 13 var top = $($h[index]).offset().top; 14 scroll(left, top); 15 }); 16 17 $(window).scroll(function(){ 18 e = $(window).scrollTop(); 19 20 for (var i = 0; i < $h.length; i++) { 21 if(e > ($($h[i]).offset().top - 100)) { 22 $a.removeClass('current'); 23 $($a[i]).addClass('current'); 24 } 25 } 26 }); 27 28 }); 29 </script>
<div class="api-wrap"> <h1></h1> <p class="api-author"></p> <h3 data-id="file">目录/文件说明：</h3> <div class="api-con"> <pre> webroot： <em><strong>css：</strong></em> <em>├─ <strong class="fwn">api.less</strong><b>文档说明css</b></em> <em>├─ <strong class="fwn">css.less</strong><b>示例css</b></em> <em>├─ <strong class="fwn">config.less</strong><b>less变量/函数</b></em> <em>├─ <strong class="fwn">common.less</strong><b>公共css</b></em> <em>├─ <strong class="fwn">index.less</strong><b>首页css/活动</b></em> <em>├─ <strong class="fwn">course.less </strong><b>我的课程/精品课程库</b></em> <em>├─ <strong class="fwn">ihma.less</strong><b>我的IHMA</b></em> <em>├─ <strong class="fwn">account.less</strong><b>我的账户/我的消息</b></em> <em>├─ <strong class="fwn">popup.less</strong><b>弹窗</b></em> <em><b class="red">页面上使用的都是.css 压缩版本</b></em> <em><b class="red">.less文件都需要引用config.less</b></em> <em><strong>js：</strong></em> <em>├─ <strong class="fwn">common.js</strong><b>公共/配置js</b></em> <em>├─ <strong class="fwn">html5.js</strong></em> <em>├─ <strong>app</strong><b>项目js</b></em> <em>├─ <strong class="fwn">account.js</strong></em> <em>├─ <strong class="fwn">course.js</strong></em> <em>├─ <strong class="fwn">home.js</strong></em> <em>├─ <strong class="fwn">ihma.js</strong></em> <em>├─ <strong class="fwn">list.js</strong><b>列表js</b></em> <em><strong>plugins</strong><b>插件</b></em> <em><strong>htmls：</strong><b>html文件</b></em> <em><strong>images：</strong><b>图片文件</b></em> <em><strong>pic：</strong><b>无用的图片</b></em> </pre> </div> <h3 data-id="less">Less说明：</h3> <div class="clearfix"> <h4>变量：</h4> <div class="api-left"> <span>@w => 1000px;</span> </div> </div> <div class="clearfix"> <h4>颜色：</h4> <div class="api-left"> <span>@red => <b style="color:#fe2a00;">#fe2a00;</b></span> <span>@red2 => <b style="color:#ee5837;">#ee5837;</b></span> <span>@red3 => <b style="color:#ffb49a;">#ffb49a;</b></span> <span>@blue => <b style="color:#0354a6;">#0354a6;</b></span> <span>@blue2 => <b style="color:#3270b7;">#3270b7;</b></span> <span>@blue3 => <b style="color:#7191ca;">#7191ca;</b></span> <span>@blue4 => <b style="color:#a8c6e8;">#a8c6e8;</b></span> <span>@blue5 => <b style="color:#0b66a8;">#0b66a8;</b></span> </div> <div class="api-left"> <span>@green => <b style="color:#b1cf89;">#b1cf89;</b></span> <span>@orange => <b style="color:#f89e7b;">#f89e7b;</b></span> <span>@white => <b style="color:#fff;">#fff;</b></span> <span>@black => <b style="color:#000;">#000;</b></span> <span>@black2 => <b style="color:#333;">#333;</b></span> <span>@black3 => <b style="color:#666;">#666;</b></span> <span>@gray => <b style="color:#999;">#999;</b></span> <span>@gray2 => <b style="color:#efefef;background:#fff;">#efefef;</b></span> </div> <div class="api-left"> <span>@bg => <b style="color:#eee;background:#fff;">#eee;</b></span> <span>@bg2 => <b style="color:#f6f6f6;background:#fff;">#f6f6f6;</b></span> <span>@border => <b style="color:#ebebeb;background:#fff;">#ebebeb;</b></span> <span>@link-blue => <b style="color:#0c70bd;">#0c70bd;</b></span> <span>@link-black => <b style="color:#333;">#333;</b></span> </div> </div> <div class="clearfix"> <h4>字体/其他：</h4> <div class="api-left2"> <span>@yahei => <b style="font-family:'Microsoft YaHei' Arial;">'Microsoft YaHei' Arial;</b></span> <span>@song => <b style="font-family:\u5b8b\u4f53 Arial;">\u5b8b\u4f53 Arial;</b> 宋体</span> <span>@font => <b style="font-family:Arial 'Microsoft YaHei';">Arial 'Microsoft YaHei';</b></span> <span> </span> <span>@icon => url(../images/icon.fw.png) no-repeat;</span> <span>@icon2 => url(../images/icon2.fw.png) no-repeat;</span> <span>@icon-8 => url(../images/icon-png8.fw.png) no-repeat;</span> </div> </div> <h3 data-id="css">CSS说明：</h3> <div class="clearfix"> <h4>命名：</h4> <div class="api-left s-b"> <span>.con-* 开头的都是公共组件</span> <b>.con-head</b> <b>.con-crumbs</b> <b>.con-title</b> <b>.con-table</b> <b>.con-search</b> <b>.con-sort</b> <b>.con-tab</b> <span>.icon-* 开头的都是图标</span> <span>.btn-* 开头的都是按钮</span> </div> <div class="clearfix"></div> <h4>Class：</h4> <div class="api-left s-b"> <span>.show 显示，配合js</span> <span>.hide 隐藏，配合js</span> <span>.no-line 无边线</span> <span>.no-line-b 无底边线</span> <span>.no-line-r 无右边线</span> </div> </div> <h3 data-id="php">PHP语法说明：</h3> <div class="clearfix"> <h4>路径：</h4> <div class="api-left-long"> <span><b><{$cssPath}></b> => /css</span> <span><b><{$jsPath}></b> => /js</span> <span><b><{$imgPath}></b> => /images</span> <span><b><{$picPath}></b> => /pic</span> <span><b><{$jsGalleryPath}></b> => http://f3.v.veimg.cn/f2e/gallery</span> <span><b><{$version}></b> => 年月日时分秒 201404111432</span> </div> </div> <h3>2：┌ ┬ ┐├ ┼ ┤└ ┴ ┘─</h3> <div class="api-con"> <p class="api-space"></p> <pre> <strong>使用说明：</strong> <span><b><a></b> 按钮</span> <span><b><a class="btn btn-green">按钮文本</a></b></span> <span><i>btn：</i>基础按钮，h30，左右padding15px</span> <span><i>btn-big：</i>大一号按钮，h40</span> <span><i>btn-icon：</i>图标按钮</span> <span><i>btn-icon2：</i>弹窗图标按钮</span> <span><i style="width: 365px;">btn-green、btn-blue、btn-orange、btn-gray：</i>按钮颜色</span> <span><i>p522：</i>padding: 5px 22px;</span> <span><i>p1041：</i>padding: 10px 41px; 其他类推</span> </pre> </div> </div> <div class="api-nav"> <a>目录/文件说明</a> <a>Less说明</a> <a>CSS说明</a> <a>PHP语法说明</a> </div>
另外一个demo页面：http://fex.baidu.com/webuploader/getting-started.html
使用的是Bootstrap ScrollSpy 用法，用法如http://justcoding.iteye.com/blog/1955564
