鼠标点击特效

鼠标点击特效


在后台自定义js里面添加以下代码

<!--鼠标点击特效-->
<script type="text/javascript">!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);</script>

为网站添加知心天气

知心天气


去知心天气申请注册一个api。网址:https://www.seniverse.com
把生成的代码放在/usr/themes/handsome/component/headnav.php <!-- / search form -->之后。
<div id="tp-weather-widget"></div>
加上class="searchform navbar-form navbar-form-sm navbar-left shift"
结果<div id="tp-weather-widget" class="searchform navbar-form navbar-form-sm navbar-left shift"></div>

禁止f12调试

禁f12


自定义输出尾部引入<script src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>
自定义JavaScript加入一下代码

document.onkeydown = function(){
    if(window.event && window.event.keyCode == 123) {
        layer.msg("F12被禁用");
        event.keyCode=0;
        event.returnValue=false;
    }
}

全站变灰代码

网站变灰

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

提醒弹窗

来源提醒


在footer.php合适位置添加一下代码

<!-- 客户端信息 -->
<div id="fps"style="
    z-index:5;
    position:fixed;
    bottom:3px;
    left:3px;color:#2196F3;
    font-size:10px;
    -webkit-pointer-events: none;
    moz-pointer-events: none;    
    -ms-pointer-events: none;    
    -o-pointer-events: none;">
</div>
<script src="https://cdn.jsdelivr.net/gh/kaliisra/myblogstatic/kehuduan-js/fetch.min.js"></script>
<script src="https://cdn.gmit.vip/layer/3.1.1/layer.js"></script>
<script>
    /*网站打开提醒代码开始*/
    $(function () {
        if (/*getCookie('msg') !=*/ 1) {
            var t = document.createElement("a");
            t.href = document.referrer;
            var msgTitle = t.hostname;
            var name = t.hostname.split(".")[1];
            if ("" !== document.referrer) {
                switch (name) {
                    case 'bing': msgTitle = '必应搜索'; break; case 'baidu': msgTitle = '百度搜索'; break; case 'so': msgTitle = '360搜索'; break; case 'google': msgTitle = '谷歌搜索'; break; case 'sm': msgTitle = '神马搜索'; break; case 'sogou': msgTitle = '搜狗搜索'; break; default: msgTitle = t.hostname;
                };
            };
            var time = (new Date).getHours();
            var msg = '';
            23 < time || time <= 5 ? msg = "你是夜猫子呀?这么晚还不睡觉,明天起的来嘛?" : 5 < time && time <= 7 ? msg = "早上好!一日之计在于晨,美好的一天就要开始了!" : 7 < time && time <= 11 ? msg = "上午好!工作顺利嘛,不要久坐,多起来走动走动哦!" : 11 < time && time <= 14 ? msg = "中午了,工作了一个上午,现在是午餐时间!" : 14 < time && time <= 17 ? msg = "午后很容易犯困呢,今天的运动目标完成了吗?" : 17 < time && time <= 19 ? msg = "傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~" : 19 < time && time <= 21 ? msg = "晚上好,今天过得怎么样?" : 21 < time && time <= 23 && (msg = "已经这么晚了呀,早点休息吧,晚安~");
            $.ajax({
                type: "get", url: "https://api.gmit.vip/Api/UserInfo/", async: true, success: function (data) {
                    window.info = data; layer.msg("Hi~ 来自" + data.data.location + '~<br/>通过 ' + msgTitle + ' 进来的朋友!<br/>使用 ' + data.data.os + "<br/>" + data.data.browser + ' 访问本站!' + '<br/>' + msg); var showFPS = (function () {
                        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); };
                        var e, pe, pid, fps, last, offset, step, appendFps;
                        fps = 0; last = Date.now();
                        step = function () {
                            offset = Date.now() - last; fps += 1;
                            if (offset >= 1000) { last += offset; appendFps(fps); fps = 0; };
                            requestAnimationFrame(step);
                        };
                        appendFps = function (fps) {
                            var settings = { timeout: 5000, logError: true };
                            $('#fps').html('<span style="float:left;">' + fps + 'FPS</span><br/><span style="float:left">' + window.info.data.os + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.browser + '</span><br/><span style="float:left;margin-top:1px;">' + window.info.data.location + '</span><br/><span style="float:left;margin-top:1px;"></span>');
                        }; step();
                    })();
                }
            });
        };
    });    
</script>

复制弹出提醒

复制弹窗


放到自定义 JavaScript

<!--复制弹框-->
<script>
document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处!',showConfirmButton: false,timer: 2000});};
</script>

右边侧栏插图

每日pixiv热榜图片


效果演示

将以下代码加到后台设置->开发者设置->全局右侧广告位。
然后修改handsome/component/sidebar.php

找到<h3 class="widget-title m-t-none text-md"><?php _me("广告") ?></h3>
将广告修改为p站每日热门。

<iframe src="https://cloud.mokeyjay.com/pixiv" frameborder="0"  style="width:240px; height:380px;"></iframe>

你也可以自己部署该服务

底部美化:

1.示例代码html


打开/handsome/component/footer.php,找到<div class="wrapper bg-light">,修改成想要的样式

<!-- 底部信息 -->
    <div class="wrapper bg-light">
    <!-- 左侧底部 -->
        <div class="github-badge">
            <a rel="license" href="http://www.typecho.org" target="_blank" title="由Typecho强力驱动">
            <span class="badge-subject">Powered</span>
            <span class="badge-value bg-green">Typecho</span></a>
        </div>
    <!-- 右侧底部 -->
         <span class="pull-right hidden-xs text-ellipsis">
              <?php $this->options->BottomInfo(); ?>
              <div class="github-badge">
                  <a rel="license" href="http://beian.miit.gov.cn/" target="_blank" title="粤ICP备XXXX号">
                <span class="badge-subject">&copy;<?php echo date("Y");?></span>
                <span class="badge-value bg-blue">粤ICP备XXXX号</span></a>
            </div>
          </span>
    </div>

2. 自定义CSS中加入以下代码

/* 底部页脚小徽标 */
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 12px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}
.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.github-badge .badge-value {
  display: inline-block;
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.github-badge .bg-blue {background-color: #3282b8}
.github-badge .bg-purple {background-color: #3F51B5}
.github-badge .bg-green {background-color: #3bca6e}

自定义右键菜单

以下代码放到footer.php

<!-- 自定义右键 -->
<style type="text/css">
    a {text-decoration: none;}
    div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9;border-radius: 5px;}
    div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
    div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
    div.usercm ul li a{color:#666;padding:0 15px;display:block}
    div.usercm ul li a:hover{color:#fff;background:rgba(9,145,113,0.88);border-radius: 5px}
    div.usercm ul li a i{margin-right:10px}
    a.disabled{color:#c8c8c8!important;cursor:not-allowed}
    a.disabled:hover{background-color:rgba(255,11,11,0)!important}
    div.usercm{background:#fff !important;}
    </style>
<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.xbbk.top/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度</span></a></li>
        <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>

        <li><a href="https://www.xbbk.top/index.php/36.html"><i class="fa fa-user fa-fw"></i><span>和我当邻居</span></a></li>  
           <li><a href="https://www.xbbk.top/38.html"><i class="fa fa-pencil fa-fw"></i><span>给我留言吧</span></a></li>
    </ul>
</div>
<script type="text/javascript">
    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);

    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容!") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要百度的内容!") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    function googleSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("请选择需要谷歌的内容!") : window.open("https://www.google.com/search?q=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });
    </script>

文章标题:typecho博客handsome主题美化代码记录
本文地址:https://www.xbbk.top/170.html 转载请注明出处
版权说明:本站内容收集若有侵犯到你的权益,请联系删除,联系方式在网站最下方。
最后修改:2021 年 06 月 14 日 12 : 00 AM
如果觉得我的文章对你有用,请随意赞赏