WordPress美化——鼠标右键菜单美化

浏览器默认的鼠标右键菜单包含很多内容,相对而言也不是很美观,里面还包含审查元素以及查看网站源代码功能,有些站长可能不喜欢别人进行这些操作干脆禁用了鼠标右键功能。今天给大家分享一个很实用的功能,让鼠标右键变得更美观还可以规定用户鼠标右键指定功能。

第一步、添加代码

在WordPress主题页脚模板footer.php文件中加入以下代码:

<div class="mouse_menu">
    <ul>
        <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"  onclick="getSelect();"><i class="fa fa-clipboard fa-fw"></i><span>复制文字</span></a></li>
        <li><a href="javascript:window.location.reload();" rel="external nofollow" ><i class="fa fa-refresh fa-fw"></i><span>刷新页面</span></a></li>
        <li><a href="javascript:history.go(1);" rel="external nofollow" ><i class="fa fa-arrow-right fa-fw"></i><span>前进一页</span></a></li>
        <li><a href="javascript:history.go(-1);" rel="external nofollow" ><i class="fa fa-arrow-left fa-fw"></i><span>后退一页</span></a></li>
        <li><a href="javascript:void(0);" rel="external nofollow"  rel="external nofollow"   onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度搜索</span></a></li>
    </ul>
</div>
<script type='text/javascript' src='./mouse.js'></script>

第二步、添加样式

在主题样式文件style.css中加入以下代码:

/* 鼠标右键属性样式 */
.mouse_menu{
    position: absolute;
    display: none;
    width: 130px;
    font-size: 13px!important;
    background-color: #fff;
    opacity: 0.9;
    -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.3);
    box-shadow: 1px 1px 3px rgba(0,0,0,.3);
    z-index: 10000;
}
.mouse_menu ul {
    display: block;
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style-position: outside;
}
.mouse_menu ul li {
    margin: 0px;
    padding: 0px;
    line-height: 35px;
    border-bottom: 1px solid #ccc;
}
.mouse_menu ul li:last-child{
    border-bottom: none;
}
.mouse_menu ul li a {
    display: block;
    color: #666;
    padding: 0 20px;
}
.mouse_menu ul li a:hover{
    color: #fff;
    background: linear-gradient(-125deg,#0295f9 0%, #2f49fd 100%);
}
.mouse_menu ul li a i {
    margin-right: 10px;
}
.mouse_menu ul li .forward i{
    display: inline-block;
    -moz-transform:scaleX(-1);
    -webkit-transform:scaleX(-1);
    -o-transform:scaleX(-1);
    transform:scaleX(-1)
}
.mouse_menu a.disabled{
    color: #c8c8c8!important;
    cursor:not-allowed;
}
.mouse_menu a.disabled:hover{
    background-color:rgba(255,11,11,0)!important;
}
/* 鼠标右键属性样式结束 */

第三步、添加JavaScript

在主题根目录下创建一个mouse.js文件并将以下代码复制进去:

(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) ? swal("复制失败","您没还没选择文字呢!","error") : document.execCommand("Copy")
}
function baiduSearch() {
    var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    "" == a ? swal("搜索失败","您没还没选择文字呢!","error") : window.open("https://www.baidu.com/s?wd=" + a)
}
function googleSearch() {
    var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    "" == a ? swal("搜索失败","您没还没选择文字呢!","error") : window.open("https://www.google.com/search?q=" + a)
}
function localSearch() {
    var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
    "" == a ? swal("搜索失败","您没还没选择文字呢!","error") : window.open("search.php?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(".mouse_menu"), $.disabledContextMenu())
});

根据需要可以自行修改,最后清空浏览器缓存刷新页面即可。

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服:1377177670@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载或失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有米币奖励和额外收入!

哈米酷 其他美化 WordPress美化——鼠标右键菜单美化 https://www.hmkoo.com/693.html

互联网优质源码素材教程共享下载平台

常见问题
  • 本站除独家和商用资源外的所有资源版权均属于原作者所有,这些资源均只能用于参考学习使用,请于下载后的24个小时之内,从您的电脑中彻底删除上述内容资源,切勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整, 可对比下载完的压缩包与网盘上的容量,若小于网盘提示的容量则是不完整的原因。这是浏览器下载的bug,建议用百度网盘。
查看详情

相关文章

评论
暂无评论
WordPress美化——鼠标右键菜单美化-海报

分享本文封面