给博客添加右键转盘选单与幻灯片背景图

发布于 6 天前  4 次阅读


emmmm~抄来的~抄来的~抄来的~因为很重要,所以说三遍。


</head>前引入js,css


        <meta charset="utf-8">
        <meta name="referrer" content="no-referrer" />
        <link rel="stylesheet" id="mystyle-css" href="/wp-content/themes/Sakura/mygalgame/ui/css/myblog.css?ver=1.0.25" type="text/css" media="all">
        <script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog.js?ver=2.0.2"></script>
        <script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/bootstrap.js?ver=1.0.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.icheck.js?ver=1.0.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.validate.js?ver=1.9.0"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.lazyload.min.js?ver=1.9.3"></script>
        <style type="text/css">
            .cb-slideshow li:nth-child(1) span {
                background-image: url(https://ws1.sinaimg.cn/large/005ODKsIgw1fak01yrmxdj31hc0u00xa.jpg);
            }           
            .cb-slideshow li:nth-child(2) span {
                background-image: url(https://ws4.sinaimg.cn/large/005ODKsIgw1faojtqjcjvj31hc0u0n35.jpg);
            }           
            .cb-slideshow li:nth-child(3) span {
                background-image: url(https://ws3.sinaimg.cn/large/005ODKsIgw1fajznra0cvj31hc0u0jx4.jpg);
            }           
            .cb-slideshow li:nth-child(4) span {
                background-image: url(https://ws4.sinaimg.cn/large/005ODKsIgw1fatj7j5v5aj31hc0xfn3r.jpg);
            }           
            .cb-slideshow li:nth-child(5) span {
                background-image: url(https://ws3.sinaimg.cn/large/005ODKsIgw1fajzl01cxdj31hc0vok0e.jpg);
            }           
            .cb-slideshow li:nth-child(6) span {
                background-image: url(https://ws2.sinaimg.cn/large/005ODKsIgw1fam26ohikgj31hc11nq9k.jpg);
            }           
            @media (min-width: 767px) {
                .large {
                    background: url('https://ws3.sinaimg.cn/large/005ODKsIgw1fakb0bpddfj31hc0u044e.jpg') no-repeat;
                }
            }
        </style>

</body></html>前引入


    <body class="Sakura demo" ondragstart="return false" aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
        <section class="hidden-xs">
            <ul class="cb-slideshow">
                <li><span>苟利</span></li>
                <li><span>国家</span></li>
                <li><span>生死以</span></li>
                <li><span>岂能</span></li>
                <li><span>祸福</span></li>
                <li><span>趋避之</span></li>
            </ul>
        </section>
        <div class="GalMenu GalDropDown" style="top: 143px; left: 1291px; display: none; opacity: 1;">
            <div class="circle" id="gal">
                <div class="ring">
                    <a href="https://rainxyz.me/" title="" class="menuItem" style="left: 50%; top: 15%;">首页</a>
                    <a href="https://rainxyz.me/随机二次元图片api/" title="" class="menuItem" style="left: 80.3109%; top: 32.5%;"> API</a>
                    <a href="https://rainxyz.me/留言板/" title="" class="menuItem" style="left: 80.3109%; top: 67.5%;">留言版</a>
                    <a href="https://img.rainxyz.me/acg?mod/" title="" class="menuItem" style="left: 50%; top: 85%;">试试手气?</a>
                    <a href="https://rainxyz.me/" title="" class="menuItem" style="left: 19.6891%; top: 67.5%;">更新日志</a>
                    <a href="https://img.rainxyz.me/" title="" class="menuItem" style="left: 19.6891%; top: 32.5%;">图床</a>
                </div>
                <audio id="audio" src="https://rainxyz.me/onj001.mp3?ver=1.0.3"></audio> //选择要播放的右键提示音
            </div>
        </div>
        <div id="overlay" class="magnify" style="display: none;">
            <div class="large" style="display: block; left: 1341px; top: 193px; background-position: -1401px -205px;"></div>
            <img class="small" src="/wp-content/themes/Sakura/mygalgame/ui/images/rpic.png" width="1920">
        </div>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog_bd.js?ver=1.0.3"></script>
        <canvas width="1920" height="969" style="position: fixed; top: 0px; left: 0px; pointer-events: none; z-index: 888;"></canvas>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog_min.js?ver=1.1.1"></script>
    </body>

demo


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="referrer" content="no-referrer" />
        <link rel="stylesheet" id="mystyle-css" href="/wp-content/themes/Sakura/mygalgame/ui/css/myblog.css?ver=1.0.25" type="text/css" media="all">
        <script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.12.4"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog.js?ver=2.0.2"></script>
        <script type="text/javascript" src="/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/bootstrap.js?ver=1.0.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.icheck.js?ver=1.0.1"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.validate.js?ver=1.9.0"></script>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/jquery.lazyload.min.js?ver=1.9.3"></script>
        <style type="text/css">
            .cb-slideshow li:nth-child(1) span {
                background-image: url(https://ws1.sinaimg.cn/large/005ODKsIgw1fak01yrmxdj31hc0u00xa.jpg);
            }           
            .cb-slideshow li:nth-child(2) span {
                background-image: url(https://ws4.sinaimg.cn/large/005ODKsIgw1faojtqjcjvj31hc0u0n35.jpg);
            }           
            .cb-slideshow li:nth-child(3) span {
                background-image: url(https://ws3.sinaimg.cn/large/005ODKsIgw1fajznra0cvj31hc0u0jx4.jpg);
            }           
            .cb-slideshow li:nth-child(4) span {
                background-image: url(https://ws4.sinaimg.cn/large/005ODKsIgw1fatj7j5v5aj31hc0xfn3r.jpg);
            }           
            .cb-slideshow li:nth-child(5) span {
                background-image: url(https://ws3.sinaimg.cn/large/005ODKsIgw1fajzl01cxdj31hc0vok0e.jpg);
            }           
            .cb-slideshow li:nth-child(6) span {
                background-image: url(https://ws2.sinaimg.cn/large/005ODKsIgw1fam26ohikgj31hc11nq9k.jpg);
            }           
            @media (min-width: 767px) {
                .large {
                    background: url('https://ws4.sinaimg.cn/large/005ODKsIgw1fauqa05nd3j31hc0uin3q.jpg') no-repeat;
                }
            }
        </style>
    </head>
    <body class="sakura demo" ondragstart="return false" aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
        <section class="hidden-xs">
            <ul class="cb-slideshow">
                <li><span>苟利</span></li>
                <li><span>国家</span></li>
                <li><span>生死以</span></li>
                <li><span>岂能</span></li>
                <li><span>祸福</span></li>
                <li><span>趋避之</span></li>
            </ul>
        </section>
        <div class="GalMenu GalDropDown" style="top: 143px; left: 1291px; display: none; opacity: 1;">
            <div class="circle" id="gal">
                <div class="ring">
                    <a href="https://rainxyz.me/" title="" class="menuItem" style="left: 50%; top: 15%;">首页</a>
                    <a href="https://rainxyz.me/随机二次元图片api/" title="" class="menuItem" style="left: 80.3109%; top: 32.5%;"> API</a>
                    <a href="https://rainxyz.me/留言板/" title="" class="menuItem" style="left: 80.3109%; top: 67.5%;">留言版</a>
                    <a href="https://img.rainxyz.me/acg?mod/" title="" class="menuItem" style="left: 50%; top: 85%;">试试手气?</a>
                    <a href="https://rainxyz.me/" title="" class="menuItem" style="left: 19.6891%; top: 67.5%;">更新日志</a>
                    <a href="https://img.rainxyz.me/" title="" class="menuItem" style="left: 19.6891%; top: 32.5%;">图床</a>
                </div>
                <audio id="audio" src="https://rainxyz.me/onj001.mp3?ver=1.0.3"></audio>
            </div>
        </div>
        <div id="overlay" class="magnify" style="display: none;">
            <div class="large" style="display: block; left: 1341px; top: 193px; background-position: -1401px -205px;"></div>
            <img class="small" src="/wp-content/themes/Sakura/mygalgame/ui/images/rpic.png" width="1920">
        </div>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog_bd.js?ver=1.0.3"></script>
        <canvas width="1920" height="969" style="position: fixed; top: 0px; left: 0px; pointer-events: none; z-index: 888;"></canvas>
        <script type="text/javascript" src="/wp-content/themes/Sakura/mygalgame/ui/js/myblog_min.js?ver=1.1.1"></script>
    </body>
</html>

结束啦
引入文件~链接: 提取码: Rain


The world is a dream in rain