基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1、插进使用场景
请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining，查看百度百科页面效果。
2、插件源代码（更新 2017-08-28）：
jQuery.CateNav = function(elem1, elem2) {
var currObj,
offsetTop = 0,
h2List = new Array(),
h3List = new Array(),
positonList = new Array();
/*
* addNav()函数:根据文章内容自动生成目录结构
* 原理是：(1)查找文章内容中的h2和h3标签
* (2)根据查找到的h2标签生成 <dd class="cate-item1"><a href="#3">内设机构</a></dd> 样式的目录结构
* (3)根据查找到的h3标签生成 <dd class="cate-item2"><a href="#3_1">办公室</a></dd> 样式的目录结构
*/
var addNav = function() {
var i1 = 0,
i2 = 0,
n1 = 0,
n2 = 0;
var temp = '<dl style="">';
//注意正则表达式写法：/(<h[2-3]>.*?<\/h[2-3]>)/ig 在量词后面直接加上一个问号？就是非贪婪模式
var cateList = $(elem1).html().match(/(<h[2-3]>.*?<\/h[2-3]>)/ig);
for(var i = 0; i < cateList.length; i++) {
if(/(<h2>.*?<\/h2>)/ig.test(cateList[i])) {
n1++;
n2 = 0;
//去掉html标签正则表达式：/<.*?>/g
temp += '<dd class="cate-item1"><a href="#' + n1 + '">' + cateList[i].replace(/<.*?>/g, "") + '</a></dd>';
h2List[i1] = n1;
i1++;
} else {
n2++;
//去掉html标签正则表达式：/<.*?>/g
temp += '<dd class="cate-item2"><a href="#' + n1 + '_' + n2 + '">' + cateList[i].replace(/<.*?>/g, "") + '</a></dd>';
h3List[i2] = n1 + '_' + n2;
i2++;
}
}
temp += '</dl>';
$(elem2).append(temp);
};
//addPoint()函数:向文章内容中插入锚点，同时计算每个锚点距离文章顶部的距离
var addPoint = function() {
var i1 = i2 = 0;
$(elem1).find('h2').each(function() {
$(this).prepend('<a name="' + h2List[i1] + '"></a>');
i1++;
});
$(elem1).find('h3').each(function() {
$(this).prepend('<a name="' + h3List[i2] + '"></a>');
i2++;
});
$(elem1).find('a[name]').each(function() {
positonList.push($(this).parent().position().top);
});
};
//clickPoint()函数:点击目录，跳转相对应文章内容的锚点位置
//注意:先将滚动条修正为滚回到顶部
var clickPoint = function() {
$(elem2 + ' a').click(function(e) {
e.preventDefault();
$(elem2 + ' dd').removeClass('active');
$(this).parent('dd').addClass('active');
currObj = $("[name='" + $(this).attr('href').replace(/#/, '') + "']");
//先修正为滚回到顶部
$(elem1).scrollTop(0);
offsetTop = currObj.parent().position().top;
$(elem1).scrollTop(offsetTop);
});
};
//scrollWin()函数:文章内容滚动时，对应的目录也随之变化
var scrollWin = function() {
var windowTop = 0;
$(elem1).scroll(function() {
windowTop = $(elem1).scrollTop();
for(var i = 0; i < positonList.length; i++) {
if(windowTop >= positonList[i]-1) {
$(elem2 + ' dd').removeClass('active');
$(elem2).find('a').eq(i).parent().addClass('active');
}
}
});
};
//初始化函数
var init = function() {
//增加目录结构
addNav();
//增加文章内容锚点
addPoint();
//目录绑定click事件
clickPoint();
//文章内容绑定滚动事件
scrollWin();
//目录的第一个a触发click事件
$(elem2 + ' a').first().click();
}
init();
}
3、示例代码：
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title>基于jquery的锚点滚动插件(百度百科效果)</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
} a,
a:hover {
text-decoration: none;
color: #000000;
} ul {
list-style: none;
} .clearfix:before,
.clearfix:after {
content: " ";
display: table;
clear: both;
} .container {
width: 1000px;
margin: 0 auto;
} .con_body .nav_list {
width: 300px;
height: 950px;
padding-left: 23px;
} .pull-left {
float: left !important;
} .pull-right {
float: right !important;
} .con_body .nav_list dl {
position: relative;
margin-top: 0;
} .con_body .nav_list dl:before {
display: inline-block;
height: -moz-calc(100% - 19px);
height: -webkit-calc(100% - 19px);
height: calc(100% - 19px);
margin-top: 9px;
content: "";
width: 2px;
position: absolute;
left: -18px;
background-color: #e1e1e1;
} .con_body .nav_list dl dd.cate-item1 {
font-size: 16px;
font-weight: bold;
color: #0e337a;
line-height: 30px;
} .con_body .nav_list dl dd {
position: relative;
} .con_body .nav_list dl dd.cate-item1:before {
display: inline-block;
content: "";
width: 12px;
height: 12px;
position: absolute;
left: -23px;
top: 9px;
background: url(img/jgsz_left_line-22.png) no-repeat center;
} .con_body .nav_list dl dd.cate-item1 a {
display: block;
color: #0e337a;
} .con_body .nav_list dl dd.cate-item1.active:before {
display: block;
content: "";
width: 16px;
height: 10px;
background: url(img/jgsz_left_line_active.png) no-repeat;
position: absolute;
left: -23px;
top: 10px;
} .con_body .nav_list dl dd.cate-item2 {
font-size: 14px;
color: #555555;
line-height: 30px;
position: relative;
} .con_body .nav_list dl dd.cate-item2:before {
display: inline-block;
content: "";
width: 12px;
height: 12px;
position: absolute;
left: -23px;
top: 9px;
background: url(img/jgsz_left_line-11.png) no-repeat center;
} .con_body .nav_list dl dd.cate-item2 a {
color: #555555;
} .con_body .nav_list dl dd.cate-item2.active:before {
display: block;
content: "";
width: 16px;
height: 10px;
background: url(img/jgsz_left_line_active.png) no-repeat;
position: absolute;
left: -23px;
top: 10px;
} .con_body .art_list {
border: 1px #d2d2d2 solid;
width: 680px;
height: 950px;
padding: 0 18px;
overflow-y: auto;
position: relative;
} .content .con_body .art_list h2 {
display: block;
font-size: 16px;
font-weight: bold;
line-height: 18px;
color: #0e337a;
} .con_body .art_list h2 span.icon {
display: inline-block;
width: 4px;
height: 14px;
background: url(img/title_icon.png) no-repeat;
margin-right: 6px;
} .content .con_body .art_list h3 {
display: block;
font-size: 14px;
font-weight: bold;
color: #0e337a;
line-height: 24px;
}
</style>
</head> <body> <div class="container">
<div class="con_body clearfix" id="jgsz_tab">
<div class="nav_list pull-left" id="Catalog_box"></div>
<div class="art_list pull-right" id="art_content">
<h2><span class="icon"></span>本局概况</h2>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h2><span class="icon"></span>主要职责</h2>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h2><span class="icon"></span>内设机构</h2>
<h3><a href="">办公室</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">安全管理处</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
<li>6.负责开展辖区内水上交通安全形势分析评估工作；</li>
<li>7.负责辖区航运公司安全与防污染日常监督管理工作；</li>
<li> 处 长：李龙飞 联系电话：03355366975</li>
</ul>
<h3><a href="">危管防污处</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
</ul>
<h3><a href="">直属机关党委办公室（工会办公室）</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">纪检监察处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">宣传处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">党组工作部（组织处）</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">科技信息处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">规费征稽处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">基建装备处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">船员管理处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">船舶监督处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">通航管理处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">指挥中心（搜救中心办公室）</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">人事教育处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">财务审计处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">综合计划处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">法规规范处</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h2><span class="icon"></span>处室办事机构</h2>
<h3><a href="">秦皇岛海上溢油应急反应中心</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">政务中心</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
<li>6.负责开展辖区内水上交通安全形势分析评估工作；</li>
<li>7.负责辖区航运公司安全与防污染日常监督管理工作；</li>
<li> 处 长：李龙飞 联系电话：03355366975</li>
</ul>
<h3><a href="">船员考试中心</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
</ul>
<h2><span class="icon"></span>分支机构</h2>
<h3><a href="">秦皇岛海事局</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">唐山海事局</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
<li>6.负责开展辖区内水上交通安全形势分析评估工作；</li>
<li>7.负责辖区航运公司安全与防污染日常监督管理工作；</li>
<li> 处 长：李龙飞 联系电话：03355366975</li>
</ul>
<h3 id="cfd"><a href="">曹妃甸海事局</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
</ul>
<h3><a href="">沧州海事局</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
</ul>
<h2><span class="icon"></span>事业单位</h2>
<h3><a href="">后勤管理中心</a></h3>
<ul>
<li>1、负责组织协调局机关日常事务；</li>
<li>2、负责组织协调局机关日常事务；</li>
<li>3、负责组织协调局机关日常事务；</li>
<li>4、负责组织协调局机关日常事务；</li>
<li>5、负责组织协调局机关日常事务；</li>
<li>6、负责组织协调局机关日常事务；</li>
</ul>
<h3><a href="">通信中心</a></h3>
<ul>
<li>1.负责水上交通安全综合管理工作；</li>
<li>2.综合协调和指导辖区水运安全生产工作；</li>
<li>3.负责开展国际海事研究委员会ISM分委会的日常工作。</li>
<li>4.负责辖区航运公司、船舶安全管理体系审核发证及相关管理工作；</li>
<li>5.参与重大等级及以上水上交通事故及污染事故调查处理工作；负责辖区水上交通事故及污染事故的结案批复和统计分析工作；组织开展辖区较大等级水上交通事故及污染事故调查处理工作；指导分支机构调查处理一般等级及以下水上交通事故及污染事故；</li>
</ul>
<!--重要 占位符-->
<div style="height: 900px;"> </div>
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="js/jQuery.CateNav.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function() { $.CateNav('#art_content', '#Catalog_box'); })
</script> </body> </html>
说明（更新2017-08-28）：
(1)文章内容即art_content的定位方式需要为position: relative; 便于jquery的position()函数正确返回值。
(2)下面是页面中需要的图片，请注意引用路径：
4、效果截图
左侧的目录结构是根据右侧文章内容自动生成的。
5、插件实际使用
插件真实使用请查看：http://www.hbmsa.gov.cn/html/zzjg/#tit01
基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js的更多相关文章
- 基于jQuery的上下左右无缝滚动应用(单行或多行)
$(function(){ var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving; ...
- 基于jQuery图片元素网格布局插件
基于jQuery图片元素网格布局插件是一款可以将图片或HTML元素均匀分布排列为网格布局的jQuery插件jMosaic.效果图如下: 在线预览 源码下载 实现的代码. html代码: <c ...
- 基于jquery的json转table插件jsontotable
分享一款基于jquery的json转table插件jsontotable.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="container ...
- 基于jquery的提示框JavaScript 插件，类Bootstrap
目录 基于jquery的提示框JavaScript 插件,类Bootstrap 基于jquery的提示框JavaScript 插件,类Bootstrap 源码 github地址: https://gi ...
- jQuery超酷下拉插件6种效果演示
原始的下拉框很丑啦, 给大家一款jQuery超酷下拉插件6种效果 效果预览 下载地址 实例代码 <div class="container"> <section ...
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- 基于jquery二维码生成插件qrcode
1.首先在页面中加入jquery库文件和qrcode插件. ? 1 2 <script type="text/javascript" src="jquery.js& ...
- 基于jQuery实现点击列表加载更多效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> < ...
随机推荐
- Linux下分割、合并文件——dd和cat
功能说明:读取,转换并输出数据. 语 法:dd [bs=<字节数>][cbs=<字节数>][conv=<关键字>][count=<区块数>][ibs=& ...
- 给Android组件添加事件一个很好用的方法
在这里想和大家分享一下很好用的添加事件方法,特别是在处理ListView里的Item事件的时候,很方便. 首先,在XML里布局的时候,添加这样一个属性: android:onClick="C ...
- 如何在IE11中开启WebGL暨微软和WebGL的恩怨情仇录
正如我们上周报道的,国外开发者Francois Remy在泄露版Windows Blue附带的Internet Explorer 11中发现,WebGL接口已经封装完成,但功能上还未能开放支持.在这之 ...
- 编译Opencv的GPU，利用CUDA加速
首先检查自己的机器是否支持,否则都是白搭(仅仅有NVIDIA的显卡才支持.可在设备管理器中查看) 假设不用GPU.能够直接官网下载预编译好的库 环境: 1 VS2013 2 Opencv2.4.9 3 ...
- 【JVM】调优笔记3-----JVM参数配置 JDK1.8
一.关于JVM参数配置,有多种途径. 1.在tomcat中直接配置的 打开tomcat的安装目录, 在bin下修改catalina.bat文件 添加如下: set "JAVA_OPTS=-X ...
- python测试开发django-7.django模板继承（block和extends）
前言 打开一个网站时候,点导航栏切换到不同的页面,发现导航部分是不变的,只是页面的主体内容变了,于是就可以写个母模板,其它的子页面继承母模板就可以了. 母模板 可以在母模板中添加多个块标签,每个块标签 ...
- dwr3实现消息精确推送详细步骤
最近项目中需要用到推送消息,找了很久终于找到一篇不错的文章,方便以后查看就转载了,也分享给大家,希望能帮到有需要的人. 第一.在项目中引入dwr.jar,然后在web.xml中进行配置,配置如下: & ...
- Derby安装，创建数据库，在Java程序中使用Derby
1,下载并安装Derby: 下载地址:http://db.apache.org/derby /derby_downloads.html,下载最新版本. 我用的是10.5.3.0. 解压缩到任意文件夹, ...
- 第一章 关于html适应手机屏幕的写法
在网页的中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度: <meta name="viewport" content="width=device-widt ...
- vs 默认的INC和LIB
用户环境变量添加 INCLUDE=C:\inc;c:\inc2 LIB=c:\lib 编辑文件C:\Users\Administrator\AppData\Local\Microsoft\MSBuil ...