zoukankan      html  css  js  c++  java
  • 【网上转载搜罗】本博客花里胡哨(划掉)效果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(" " + 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使用,然后是在设置里面最底下一栏我忘了叫什么那里粘贴一下就好了。对,就是这样。
    原谅我年老记不清事,诸君欲求达到效果最佳,可以把它们全部粘上去,总没错对吧。

  • 相关阅读:
    cors解决跨域
    神经网络和keras
    tensorflow笔记
    5.聚类算法-kmeans
    4.回归类算法-目标值连续型
    3.分类算法-目标值离散型
    Phaser.js开发小游戏之洋葱头摘星星
    VS Code 插件之 vscode-debug-visualizer
    Phaser.js开发小游戏之Phaser.js介绍
    微信小程序中写threejs系列之 threejs-miniprogram
  • 原文地址:https://www.cnblogs.com/hkpls/p/11210821.html
Copyright © 2011-2022 走看看