【网上转载搜罗】本博客花里胡哨(划掉)效果js代码
<canvas class="fireworks" style="position:fixed;left:0;top:0;z-index:99999999;pointer-events:none;"></canvas>
<script type="text/javascript" src="https://blog-static.cnblogs.com/files/hkpls/1.js"></script>
<script type="text/javascript">
var setMyBlog = {
setCopyright: function() {
//设置版权信息,转载出处自动根据页面url生成
//记得把我的乌冬味的链接改了,否则就是我的github地址了
var info_str = '<p>作者:<a target="_blank">@KAMIKI</a><br>'+
'版权声明:没那么多事,转载请随意:<a class="uri"></a></p><hr></hr>',
info = $(info_str),
info_a = info.find("a"),
url = window.location.href;
$(info_a[0]).attr("href","https://www.cnblogs.com/hkpls/");
$(info_a[1]).attr("href",url).text(url);
$("#cnblogs_post_body").prepend(info);
},
setCodeRow: function(){
// 代码行号显示
var pre = $("pre.sourceCode"); //选中需要更改的部分
if(pre && pre.length){
pre.each(function() {
var item = $(this);
var lang = item.attr("class").split(" ")[1]; //判断高亮的语言
item.html(item.html().replace(/<[^>]+>/g,"")); //将<pre>标签中的html标签去掉
item.removeClass().addClass("brush: " + lang +";"); //根据语言添加笔刷
SyntaxHighlighter.all();
})
}
},
setAtarget: function() {
// 博客内的链接在新窗口打开
$("#cnblogs_post_body a").each(function(){
this.target = "_blank";
})
},
setContent: function() {
// 这个是在文章开头的目录,我不喜欢所以注释了
// 根据h2、h3标签自动生成目录
var captions_ori = $("#cnblogs_post_body h2"),
captions = $("#cnblogs_post_body h2,#cnblogs_post_body h3").clone(),
content = $("<blockquote><h4>目录</h4></blockquote>");
$("#cnblogs_post_body").prepend(content.append(captions));
var index = -1;
captions.replaceWith(function(){
var self = this;
if(self.tagName == "H2" || self.tagName == "h2"){
// 设置点击目录跳转
index += 1;
$('<a name="' + '_caption_' + index + '"></a>').insertBefore(captions_ori[index]);
return '<a href="#_caption_' + index + '"><strong>' + self.innerHTML + '</strong></a><br>';
} else {
return self.innerHTML + "<br>";
}
});
},
runAll: function() {
/* 运行所有方法
* setAtarget() 博客园内标签新窗口打开
* setContent() 设置目录
* setCopyright() 设置版权信息
* setCodeRow() 代码行号显示,
*/
this.setAtarget();
//this.setContent();
this.setCopyright();
//this.setCodeRow();//和黑色高亮主题冲突了,所以注释了
}
}
setMyBlog.runAll();
</script>
//接下来是那个华丽的鼠标点击效果代码!(应该是(弱气))
<script>
!function(){
function n(n,e,t){
return n.getAttribute(e)||t
}
function e(n){
return document.getElementsByTagName(n)
}
function t(){
var t=e("script"),o=t.length,i=t[o-1];
return{l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99)}
}
function o(){
a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,
c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight
}
function i(){
r.clearRect(0,0,a,c);
var n,e,t,o,m,l;
s.forEach(function(i,x){
for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e<u.length;e++)n=u[e],
null!==n.x&&null!==n.y&&(o=i.x-n.x,m=i.y-n.y,
l=o*o+m*m,l<n.max&&(n===y&&l>=n.max/2&&(i.x-=.03*o,i.y-=.03*m),
t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke()))
}),
x(i)
}
var a,c,u,m=document.createElement("canvas"),
d=t(),l="c_n"+d.l,r=m.getContext("2d"),
x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||
function(n){
window.setTimeout(n,1e3/45)
},
w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o,
window.onmousemove=function(n){
n=n||window.event,y.x=n.clientX,y.y=n.clientY
},
window.onmouseout=function(){
y.x=null,y.y=null
};
for(var s=[],f=0;d.n>f;f++){
var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3})
}
u=s.concat([y]),
setTimeout(function(){i()},100)
}();
</script>
就是这么多,上面的是烂大街的蜘蛛丝,中间还附带一个奇怪的版权声明(请根据自己需要微调),下面的是在老爷机上加载就卡得不行的鼠标点击效果(不过不得不说真的好看)
具体的话就先在博客园申请一下js使用,然后是在设置里面最底下一栏我忘了叫什么那里粘贴一下就好了。对,就是这样。
原谅我年老记不清事,诸君欲求达到效果最佳,可以把它们全部粘上去,总没错对吧。
【网上转载搜罗】本博客花里胡哨(划掉)效果js代码的更多相关文章
- asp.net 后台实现删除,划掉效果
效果: name = "<S>" + fircon + "</br>" + "</S>"; 增加“< ...
- 【目录】本博客其他.NET开源项目文章目录
本博客所有文章分类的总目录链接:本博客博文总目录-实时更新 1.本博客其他.NET开源项目文章目录 37..NET平台开源项目速览(17)FluentConsole让你的控制台酷起来 36..NET平 ...
- Attention:本博客暂停更新
Attention:本博客暂停更新 2016年11月17日08:33:09 博主遗产 http://www.cnblogs.com/radiumlrb/p/6033107.html Dans cett ...
- 博客已经转移到http://geekori.cn,本博客不再更新
已经建立了独立博客:极客起源(http://geekori.cn),并将大部分博文已经转移到新的博客,本博客不再更新.
- Hello World(本博客启程篇)
Hello World 作为本博客第一篇日志,作为程序员,无论走到哪里,做什么事,必须先输出这句话. 一个想法 从今天3月份到现在一直在学技术,过程中坑的解决.知识的总结以及想法等都写到了" ...
- 本博客停止更新,移至purecpp.org
声明:本博客停止更新,迁移至C++开源社区purecpp.org, 欢迎持续关注!
- 本博客不再更新,欢迎访问本人托管在GitHub上的博客:www.wshunli.com
本博客不再更新. 欢迎访问本人托管在GitHub上的博客:www.wshunli.com
- 本博客迁移到Github,之后停止更新
本博客之后停止更新或者更新不是很及时,关注博客请移步 http://waylife.github.io 或者 http://blog.13kbook.com 谢谢支持. Update Time ...
- JS日期格式化(网上转载)
JS日期格式化(网上转载) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...
随机推荐
- h5-localStorage储存的使用
<!-- localStorage的使用: 1.存储的内容大概20mb 2.不同浏览器不能共享数据,但是在同意浏览器的不同窗口中可以共享数据 3.永久生效,他的数据是储存在硬盘上,并不会随着页面 ...
- Python笔记_第四篇_高阶编程_进程、线程、协程_1.进程
1. 多任务原理: 现代操作系统,像win,max os x,linux,unix等都支持多任务. * 什么叫做多任务? 操作系统可以同时运行多个任务. * 单核CPU实现多任务原理? 操作系统轮流让 ...
- 用IMX6开发板创建Android模拟器
基于迅为IMX6开发板 在 AndroidStudio 中,单击“Tools”->“Android”->“AVD Manager”选项.弹出 如下对话框,点击红色方框中的按钮. 弹出如下所 ...
- PAT Advanced 1050 String Subtraction (20) [Hash散列]
题目 Given two strings S1 and S2, S = S1 – S2 is defined to be the remaining string afer taking all th ...
- JIT Debug Info 简介
原总结debug调试dump转储文件JITprocdumpJIT Debugging 前言 在上一篇介绍 JIT Debugging 的文章 -- 你需要了解的JIT Debugging 中,我们了解 ...
- 你需要了解的JIT Debugging
原总结debug调试dump转储文件windbgprocdumpJIT Debugger 如果你还不清楚什么是转储文件,不知道什么时候需要转储文件,请参考转储文件系列文章的第一篇 -- 转储文件知多少 ...
- Please select an empty folder to install Android Studio
原因 当前安装的Android Studio的文件夹不是空的 解决 把路径改成一个空文件夹即可
- 从list中取N个随机生成一个集合
在工作中发现有很多有序算法,较少见到一些可用的无序随机算法.无序随机算法的目的是让客户感觉每次都不一样,因为一直看一样的会审美疲劳哈. 在jdk自带一种CollectionUtils.shuffle& ...
- AtCoder Beginner Contest 126
因为本人rating太低,这场比赛还要记rating就来划水了,果然垫底了. 6题都很水,于是头一次在网赛中AK,不过由于网卡+手速太慢还是成功垫底. ABE 签到.不贴代码了,因为A考察字符串读入和 ...
- Kruskal算法详解
本章介绍克鲁斯卡尔算法.和以往一样,本文会先对克鲁斯卡尔算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 最小生成树 在含有n个顶点的连通图中选择n-1条边, ...