添加底部小火箭+目录
1.添加返回小火箭
页脚Html代码
<span id="back-to-top"><a href="#top"><img src="https://files.cnblogs.com/files/makexu/gotop.gif" style="width:100px;height:100px;"></a></span>
页面定制CSS代码
/*回到顶部*/
#back-to-top {bottom: 0;padding: 5px 5px;position: fixed;right: 2px;cursor: pointer;
}
2.添加目录
页脚html代码
<script language="javascript" type="text/javascript">
// 生成目录索引列表
// ref: http://www.cnblogs.com/wangqiguo/p/4355032.html
// modified by: zzq
function GenerateContentList()
{var mainContent = $('#cnblogs_post_body');var h2_list = $('#cnblogs_post_body h4');//如果你的章节标题不是h2,只需要将这里的h2换掉即可if(mainContent.length < 1)return;if(h2_list.length>0){var content = '<a name="_labelTop"></a>';content += '<div id="navCategory" style="color:#152e97;">';content += '<p style="font-size:18px;"><b>目录</b></p>';content += '<ul>';for(var i=0; i<h2_list.length; i++){var go_to_top = '<div style="text-align: right;"><a href="#_labelTop" style="color:#f68a33">回到顶部</a><a name="_label' + i + '"></a></div>';$(h2_list[i]).before(go_to_top);var h3_list = $(h2_list[i]).nextAll("h5");var li3_content = '';for(var j=0; j<h3_list.length; j++){var tmp = $(h3_list[j]).prevAll('h4').first();if(!tmp.is(h2_list[i]))break;var li3_anchor = '<a name="_label' + i + '_' + j + '"></a>';$(h3_list[j]).before(li3_anchor);li3_content += '<li><a href="#_label' + i + '_' + j + '">' + $(h3_list[j]).text() + '</a></li>';}var li2_content = '';if(li3_content.length > 0)li2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a><ul>' + li3_content + '</ul></li>';elseli2_content = '<li><a href="#_label' + i + '">' + $(h2_list[i]).text() + '</a></li>';content += li2_content;}content += '</ul>';content += '</div><p> </p>';content += '<hr style="height:1px;border:none;border-top:1px dashed #0066CC;"/>';if($('#cnblogs_post_body').length != 0 ){$($('#cnblogs_post_body')[0]).prepend(content);}}
}GenerateContentList();
</script>
转载于:https://www.cnblogs.com/makexu/p/7701082.html
添加底部小火箭+目录相关推荐
- 微信小程序怎么添加底部菜单按钮
继续微信小程序方面的教程,今天讲怎么在空白的小程序页面添加几个类似菜单的按钮,实现点击某个按钮跳转到对应界面,而不是单单局限于一个页面. 需要什么: 微信小程序账户 电脑一台 电脑安装微信开发者工具软 ...
- 微信小程序添加底部导航栏
我们平时上微信可以看到,微信的底部是4个导航栏选项进行切换的,我们自己开发小程序时,如果要添加像微信那样的底部导航栏的话,其实实现方式非常简单,便捷. 在微信小程序开发IDE中,我们新建一个小程序项目 ...
- Android桌面悬浮窗进阶,QQ手机管家小火箭效果实现
这次我们将代码的重点放在火箭升空的效果上,因此简单起见,就直接在模仿360手机卫士悬浮窗的那份代码的基础上继续开发了,如果你还没有看过那篇文章的话,建议先去阅读 Android桌面悬浮窗效果实现,仿3 ...
- Android开发实战《手机安全卫士》——7.“高级工具”模块结尾 小火箭动画
文章目录 1.高级工具--Toast提示框的双击事件 2.高级工具--服务中处理Toast提示框的拖拽事件 3.拓展功能--小火箭需求分析 4.拓展功能--小火箭的业务实现 1.高级工具--Toast ...
- [填坑手册]小程序目录结构和组件化使用心得
小程序目录结构 关于小程序的目录结构,可以说一开始大家都有各自的开发习惯和命名规则,但一旦项目变得复杂庞大的时候,你就发现管理起来和后期维护变得很麻烦,如果是 协同开发 的话,更容易出现 " ...
- 拖拽升空的Android小火箭
先上演示效果 1.MainActivity 主布局就两个Button按钮 :一开启.二关闭 就不贴主布局xml了 因为小火箭是游离在activity之外的,所以不能依赖activity的生命周期 需要 ...
- 360悬浮加速小火箭,内存清理,加速缓存
360悬浮加速小火箭,内存清理,加速缓存 关于我 最近时间都比较的紧,处理不同项目的BUG,今天偷得半日闲,把剩下项目的一部分扔给了组长.有个问题没解决,做了两天也没完成,实在是没有办法了.也很感谢, ...
- Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果
功能分析: 1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中: 2.小火箭挂载在手机窗体 ...
- android桌面小火箭升空动画
1 public class MainActivity extends Activity { 2 @Override 3 protected void onCreate(Bundle savedIns ...
最新文章
- 把对象转换成JSON字符串 第二稿支持移动设备
- 统计字符串中单词个数
- Idea+springcloud+zookeeper做的服务发现和远程连接zookeeper
- ICLR2021 | 唯一录取的NER论文:NER数据存在漏标怎么办?
- 页面动态加载android,Android APP启动页面动态加载全部权限
- C++ queue队列如何遍历
- html数字什么字体样式,css字体样式属性有哪些?
- CAD图纸管理,CAD图纸高效的管理解决方案
- mysql 数据库修改ip_mysql数据库学习之修改主库ip地址
- opensips服务端搭建
- Flink无法在yarn提交任务:取消检查虚拟内存
- antony.net
- 移动平台动画设计的12个原则
- 超火表白代码,心心(html+css)
- 一朝春尽红颜老,花落人亡两不知.
- android 收音机调频,FM手机调频收音机
- 模块和包管理工具npm
- 关于解决HbuilderX终端不能输入问题
- 英文版-献上感恩的心-Give Thanks(风景图)
- 苹果字体怎么改_LED显示屏屏幕上的文字怎么改?