首页 > 其他 > 详细

博客园鼠标点击特效及右上角“Fork me on Github”

时间:2019-11-22 15:28:35      阅读:202      评论:0      收藏:0      [点我收藏+]

刚开通博客,想弄得炫酷一点!

 

首先,右上角插入“Fork me on Github”!

打开我的博客——>管理——>设置,找到“页首 HTML 代码”,复制文末代码加进去就行。

技术分享图片

 

 第一行换成你的github地址即可。博主还没在github上传过代码,所以随便写一个。。

 

然后是鼠标点击效果。同样在“页首 HTML 代码”进行设置,复制文末代码加入。

技术分享图片

 

 要提醒的是:鼠标点击特效,需要申请js权限!

复制代码如下:

<a href="https://www.cnblogs.com/chengbeixfh">  
<img style="position: absolute; top: 0; right: 0; border: 0;" 
    src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" 
    alt="Fork me on Github" 
    data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png">
</a>

<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
    $("body").click(function(e) {
        var a = new Array("?富强?","?民主?","?文明?","?和谐?","?自由?","?平等?","?公正?","?法治?","?爱国?","?敬业?","?诚信?","?友善?");
        var $i = $("<span></span>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
        });
        $("body").append($i);
        $i.animate({
            "top": y - 180,
            "opacity": 0
        },
        1500,
        function() {
            $i.remove();
        });
    });
});
</script>

 

 

博客园鼠标点击特效及右上角“Fork me on Github”

原文:https://www.cnblogs.com/chengbeixfh/p/11911722.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!