Loading... ## 子比主题幻灯片加入搜索框 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-7eccce958a97797fcac338307a903bd069" aria-expanded="true"><div class="accordion-toggle"><span>幻灯片搜索框</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-7eccce958a97797fcac338307a903bd069" class="collapse collapse-content"><p></p> ###**效果图:**  **幻灯片:** **1.在 `自定义小工具` → `首页-主内容上面` 新增一个 `Zibll 幻灯片(新)` 小工具** **2. 显示规则建议 `仅在PC端显示`,移动端效果不太理想** **3. 删除 `幻灯片链接`与 `叠加图层`** **4. 叠加文案设置:** * 幻灯片文案(幻灯片标题): ```html <h3><b>搜索本站精品资源</b></h3> <h5><b>开通会员,本站所有高质量资源随心下载</b></h5> ``` * 幻灯片简介: ```html <form method="get" id="searchform" action="?php echo esc_url( home_url() ) ?>"> <!--action 属性规定当提交表单时,向何处发送表单数据。?php echo esc_url( home_url() ) ?>--> <div class="container"> <div id="searchs"> <input type="text" placeholder="输入关键词搜索..." name="s" id="s" class="searchInput" autocomplete="off" /> <input class="n-button" type="submit" onclick="if(document.forms['search'].searchinput.value=='- Search -')document.forms['search'].searchinput.value='';" value="搜索" /> </div> </div> </form> ``` * `显示位置` 设置为 `居中显示` * `文案视差滚动:0%` **幻灯片设置:** **1. `幻灯片方向` 设置为 `上下切换`** **2. 关闭 `循环切换`、`显示翻页按钮`、`显示指示器`、`自动播放`** **3. `切换动画`设置为 `3D方块`** **4.`电脑端高度:266px`** **自定义css样式:** ```css /*幻灯片搜索css样式*/ /*搜索按钮样式*/ .n-button { top: 1px; right: -6px; width: 120px; height: 42px; border: 1px solid #ffffff14; border-radius: 5px; background: #504bcc; cursor: pointer; font-size: 16px; color: #fff; font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } /*搜索框样式*/ #searchs input[type="text"] { overflow: hidden; margin: 0 auto; padding-left: 19px; width: 600px; height: 42px; border: 1px solid #ffffff14; border-radius: 4px; background: rgb(255 255 255 / 62%); box-shadow: none; color: #757575; font-size: 14px; line-height: 32px; font-family: Avenir, -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; } /*幻灯片3D方块切换动画阴影透明*/ .swiper-container-cube .swiper-cube-shadow { background: #fff0 !important; } ``` <p></p></div></div></div> ## 卡片模式一排显示5篇文章 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-9c73660076b1c99757d26f41c61f5dd040" aria-expanded="true"><div class="accordion-toggle"><span>卡片模式一排显示5篇文章</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-9c73660076b1c99757d26f41c61f5dd040" class="collapse collapse-content"><p></p> **1. 先将首页侧边栏关闭,并将布局宽度设置为1200px** * **`子比主题设置` → `显示&布局` → `侧边栏设置` → `首页显示侧边栏` → `关闭` → `布局宽度:1200px`** **2. 将文章默认列表样式设置为卡片模式:** * **`子比主题设置` → `文章&列表` → `文章列表` → `默认列表模式` → `卡片模式`** **3. 自定义css样式:** ```css /*卡片模式一排显示5篇文章*/ @media (min-width: 992px){ .fluid-widget .card, .site-layout-1 .card { width: calc(20% - 16px); } } ``` <p></p></div></div></div> ## 首页布局宽度1500px <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-3b5e92e81e7c0fdd830f338570f07e8184" aria-expanded="true"><div class="accordion-toggle"><span>首页布局宽度1500px</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-3b5e92e81e7c0fdd830f338570f07e8184" class="collapse collapse-content"><p></p> 自定义javascript代码: ```javascript //首页布局宽度1500px $('body').append(location.pathname === '/' ? '<style>@media (min-width: 1500px) { main.container { width: 1500px; max-width: none; } }<style>': '') ``` <p></p></div></div></div> ## 主题 LOGO 扫光 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-8e57630b72fceece90428a81c265b1df75" aria-expanded="true"><div class="accordion-toggle"><span>主题LOGO扫光</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-8e57630b72fceece90428a81c265b1df75" class="collapse collapse-content"><p></p> **自定义css样式:** ```css /* logo 扫光 */ .navbar-brand { position:relative; overflow:hidden; margin:0px 0 0 0px; } .navbar-brand:before { content:""; position:absolute; left:-665px; top:-460px; width:200px; height:15px; background-color:rgba(255,255,255,.5); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -ms-transform:rotate(-45deg); -o-transform:rotate(-45deg); transform:rotate(-45deg); -webkit-animation:searchLights 6s ease-in 0s infinite; -o-animation:searchLights 6s ease-in 0s infinite; animation:searchLights 6s ease-in 0s infinite; } @-moz-keyframes searchLights { 50% { left:-100px; top:0; } 65% { left:120px; top:100px; } }@keyframes searchLights { 40% { left:-100px; top:0; } 60% { left:120px; top:100px; } 80% { left:-100px; top:0px; } } ``` <p></p></div></div></div> ## 导航栏标题字体加粗 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-024ad55399e55c0e2bb8f5a3d90c02ed62" aria-expanded="true"><div class="accordion-toggle"><span>导航栏字体加粗</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-024ad55399e55c0e2bb8f5a3d90c02ed62" class="collapse collapse-content"><p></p> 自定义css样式: ```css /*导航栏字体加粗*/ ul.nav {font-weight: 700;} ``` <p></p></div></div></div> ## 用户头像呼吸光环+鼠标悬停旋转放大 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-aa19c4ef750035f9242126ee0e720a9910" aria-expanded="true"><div class="accordion-toggle"><span>用户头像呼吸光环+鼠标悬停旋转放大</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-aa19c4ef750035f9242126ee0e720a9910" class="collapse collapse-content"><p></p> 自定义css样式: ```css /*头像呼吸光环和鼠标悬停旋转放大*/ .avatar { border-radius:50%; animation:light 4s ease-in-out infinite; transition:0.5s; } .avatar:hover { transform:scale(1.15) rotate(720deg); } @keyframes light { 0% { box-shadow:0 0 4px #f00; } 25% { box-shadow:0 0 16px #0f0; } 50% { box-shadow:0 0 4px #00f; } 75% { box-shadow:0 0 16px #0f0; } 100% { box-shadow:0 0 4px #f00; } } ``` <p></p></div></div></div> ## 首页文章列表悬停上浮开始 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-300e4fabbc3d33300c4966d85c43dce528" aria-expanded="true"><div class="accordion-toggle"><span>首页文章列表悬浮</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-300e4fabbc3d33300c4966d85c43dce528" class="collapse collapse-content"><p></p> 自定义css样式: ```css /*首页文章列表悬停上浮*/ @media screen and (min-width:980px) { .tab-content .posts-item:not(article) { transition:all 0.3s; } .tab-content .posts-item:not(article):hover { transform:translateY(-10px); box-shadow:0 8px 10px rgba(255,112,173,0.35); } } ``` <p></p></div></div></div> ## 主题支付模块加背景 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-df719bca4056872bc6adb172e9631d2746" aria-expanded="true"><div class="accordion-toggle"><span>主题支付模块加背景</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-df719bca4056872bc6adb172e9631d2746" class="collapse collapse-content"><p></p> `zibll\zibpay\functions\zibpay-post.php`文件第741行 ```php $html = '<div class="zib-widget pay-box ' . $order_type_class . '" id="posts-pay">'; ``` 改为 ```php $html = '<div class="zib-widget pay-box ' . $order_type_class . '" id="posts-pay" style="background: linear-gradient(#f5f8fa00, #f5f8fa61), url('.zib_post_thumbnail('', 'fit-cover', true, null).');background-size: cover;background-position-y: center;">'; ``` 夜间模式默认原黑色背景:(自定义css样式) ```css /*支付模块夜间模式原背景*/ .dark-theme #posts-pay { background: none !important; } ``` <p></p></div></div></div> ## 网站添加图片背景 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-0d96efa5226e58c84c86f6646b25f4d726" aria-expanded="true"><div class="accordion-toggle"><span>网站添加图片背景</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-0d96efa5226e58c84c86f6646b25f4d726" class="collapse collapse-content"><p></p> 自定义css样式: ```css /*网站日间主题模式图片背景*/ body { background-image: url(http://2.5ciyuan.cn/wp-content/uploads/2022/08/indexbg.png); background-repeat: repeat; background-attachment: fixed; background-position: center center; } /*网站夜间主题模式图片背景*/ .dark-theme { background-position-x: center; background-position-y: center; background-repeat: no-repeat; background-attachment: fixed; background-image: url("/**图片背景地址**/"); background-size: cover; } ``` <p></p></div></div></div> ## 添加文章更新或过期失效提示 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-172f3cf9769fd62a9ef3c255cf7f63d911" aria-expanded="true"><div class="accordion-toggle"><span>添加文章更新或过期失效提示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-172f3cf9769fd62a9ef3c255cf7f63d911" class="collapse collapse-content"><p></p> 将下面的函数代码加入到主题目录下 `functions.php`文件中 ```php //文章过期提示 function article_time_update() { date_default_timezone_set('PRC'); $newdate=time(); $updated_date = get_the_modified_time('Y-m-d H:i:s'); $updatetime=strtotime($updated_date); $custom_content = ''; if ( $newdate > $updatetime+86400) { $custom_content= '<div class="article-timeout"><strong><i class="fa fa-bell" aria-hidden="true"></i> 温馨提示:</strong>本文最后更新于<code>'. $updated_date . '</code>,某些文章具有时效性,若有错误或下载链接失效,请在下方<a href="#comment">留言</a>或联系<a target="_blank" title="站长" href="http://2.5ciyuan.cn/"><b>QQ757604673</b></a>。</div >'; } echo $custom_content; } ``` 说明:请自己修改上面有关于本站的信息,改成自己网站信息即可,图标可以用阿里矢量图 在主题目录 `zibll/inc/functions/zib-single.php`文件中,文章分页函数(大概是309行,因为我的代码有改动,所有不确定行数,见下图)下面添加下方代码即可  ```php article_time_update();//文章过期提示 ``` CSS代码:(在自定义CSS样式添加下面代码) ```css /*过期文章提示样式*/ .article-timeout { position:relative; border-radius:8px; position:relative; margin-bottom:25px; padding:10px; background-color:var(--body-bg-color); } ``` <p></p></div></div></div> ## 侧边栏HTML卡片小工具 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-19698db78388bcf0fba5056e0773774157" aria-expanded="true"><div class="accordion-toggle"><span>侧边栏HTML卡片小工具</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-19698db78388bcf0fba5056e0773774157" class="collapse collapse-content"><p></p> 网站后台 → 外观 → 小工具 → 添加一个 `自定义HTML` 的小工具 样式一: .png) HTML代码: ```html <style type="text/css"> #update_version img{margin:0px 0 15px }#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff;font-weight: 700;}.blog_link{background-color:#2ba9fa}.blog_link,.cms_link{float:left;margin-right:5%}.cms_link{background-color:#ff6969}.grid_link{float:left;background-color:#70c041} </style> <div id="update_version"> <a href="http://2.5ciyuan.cn/newposts" target="_blank" rel="noopener"><img title="2.5次元" src="http://2.5ciyuan.cn/wp-content/uploads/2022/08/1435033980773.jpg" alt="图片" style="border-radius:5px;" style=""></a> <a class="blog_link" href="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=757604673@qq.com" target="_blank" style="background-image: linear-gradient(to right, #99CCCC, #FFCC99)" rel="noopener">发送邮件</a> <a class="cms_link" href="http://2.5ciyuan.cn/newposts" target="_blank" style="background-image: linear-gradient(to right, #FF9999,#996699)" rel="noopener">点击投稿</a> <a class="grid_link" href="http://2.5ciyuan.cn/gywm" target="_blank" style="background-image: linear-gradient(to right,#339933, #9933CC)" rel="noopener">关于我们</a> </div> <div> <hr> </div> ``` 样式二: .png) HTML代码: ```html <a class="ads" href="https://a7a7.net/" target="阿七工具" style="border-radius:5px;"> <h4>阿七的小工具</h4> <h5>阿七推荐,安全有保障</h5> <span class="ads-btn ads-btn-outline">立即进入</span></a> <style> .ads { display:block; padding:40px 15px; text-align:center; color:#fff!important; background:#ff5719; background-image:-webkit-linear-gradient(135deg,#bbafe7,#5368d9); background-image:linear-gradient(135deg,#bbafe7,#5368d9) } .ads h4 { margin:0; font-size:22px; font-weight:bold } .ads h5 { margin:10px 0 0; font-size:14px; font-weight:bold } .ads.ads-btn { margin-top:20px; font-weight:bold } .ads.ads-btn:hover { color:#ff5719 } .ads-btn { display:inline-block; font-weight:normal; margin-top:10px; color:#666; text-align:center; vertical-align:top; user-select:none; border:none; padding:0 36px; line-height:38px; font-size:14px; border-radius:10px; outline:0; -webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out } .ads-btn:hover,.btn:focus,.btn.focus { outline:0; text-decoration:none } .ads-btn:active,.btn.active { outline:0; box-shadow:inset 0 3px 5px rgba(0,0,0,0.125) } .ads-btn-outline { line-height:36px; color:#fff; background-color:transparent; border:1px solid#fff } .ads-btn-outline:hover,.btn-outline:focus,.btn-outline.focus { color:#343a3c; background-color:#fff } </style> ``` 样式三:(滚动播报) .png) HTML代码: ```html <section id="custom_html-2" class="widget_text widget widget_custom_html mar16-b"> <meta charset="utf-8"> <!--<p align="center" class="widget-title l1 box-header">欢迎访问阿七博客</p>--> <div class="textwidget custom-html-widget"> <aside id="php_text-8" class="widget php_text wow fadeInUp" data-wow-delay="0.3s"> <div class="textwidget widget-text"> <style type="text/css">#container-box-1{color:#526372;text-transform:uppercase;width:100%;font-size:16px; line-height:50px;text-align:center}#flip-box-1{overflow:hidden;height:50px}#flip-box-1 div{height:50px}#flip-box-1>div>div{color:#fff;display:inline-block;text-align:center;height:50px;width:100%}#flip-box-1 div:first-child{animation:show 8s linear infinite}.flip-box-1-1{background-color:#FF7E40}.flip-box-1-2{background-color:#C166FF}.flip-box-1-3{background-color:#737373}.flip-box-1-4{background-color:#4ec7f3} .flip-box-1-5{background-color:#42c58a}.flip-box-1-6{background-color:#F1617D}@keyframes show{0%{margin-top:-300px}5%{margin-top:-250px}16.666%{margin-top:-250px}21.666%{margin-top:-200px}33.332%{margin-top:-200px}38.332%{margin-top:-150px}49.998%{margin-top:-150px}54.998%{margin-top:-100px}66.664%{margin-top:-100px}71.664%{margin-top:-50px}83.33%{margin-top:-50px}88.33%{margin-top:0px}99.996%{margin-top:0px}100%{margin-top:300px}}</style><div id="container-box-1"> <div class="container-box-1-1">坚持每天来逛逛,会让你</div> <div id="flip-box-1"><div><div class="flip-box-1-1">生活也美好了!</div> </div><div><div class="flip-box-1-2">心情也舒畅了!</div></div> <div><div class="flip-box-1-3">走路也有劲了!</div></div><div> <div class="flip-box-1-4">腿也不痛了!</div></div> <div><div class="flip-box-1-5">腰也不酸了!</div></div> <div><div class="flip-box-1-6">工作也轻松了!</div></div> </div><div class="container-box-1-2">你好我也好,不要忘记哦!</div></div></div> <div class="clear"></div> </aside></div> </section> ``` 样式四:(日期+一言) .png) HTML代码: ```html <style> .wiui-rqyy-demo { width: 100%; height: 180px; position: relative; } .wiui-rqyy-item { width: 100%; height: 100%; padding: 5px; box-sizing: border-box; color: white; text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center center; cursor: pointer; background-image: url(https://img.lizll.com/img/202206111947797.png); } .wiui-rqyy-date { font-family: Arial, Helvetica, sans-serif; } .wiui-rqyy-day { font-size: 2.5rem; font-weight: 700; } .wiui-rqyy-month { font-weight: 700; font-size: 2rem; } .wiui-rqyy-month::before { content: "/"; padding-right: 2px; } .wiui-rqyy-text { position: absolute; width: 90%; height: auto; line-height: 30px; font-family: "宋体"; font-size: 1.5rem; font-weight: 700; top: 50%; left: 50%; transform: translate(-50%, -50%); } .wiiui-rqyy-yy::after { display: inline-block; content: "_"; animation: fadeInHX 1s; animation-iteration-count: infinite; } @keyframes fadeInHX { 0% { opacity: 0; } 100% { opacity: 1; } } .wiui-rqyy-btn { display: inline-block; font-family: "新宋体"; font-weight: 700; position: absolute; right: 0; bottom: 0; margin: 10px; } #wiui-yybtn { width: 100%; position: relative; } #wiui-yybtn:hover { color: #e99896; } #wiui-yybtn:hover > .wiui-rqyy-msg { visibility: unset; } .wiui-rqyy-icon { font-size: 18px; } .wiui-rqyy-msg { visibility: hidden; font-size: 10px; color: #9784a0; position: absolute; padding: 5px; top: -5px; left: -60px; border-radius: 2px; background: white; transition: all 0.2s; } .wiui-rqyy-msg::after { content: " "; display: inline-block; width: 9px; height: 9px; background: white; position: absolute; top: 10px; transform: rotate(45deg); border-radius: 2px; } </style> <div class="wiui-rqyy-demo"> <div class="wiui-rqyy-item"> <div class="wiui-rqyy-date"> <span class="wiui-rqyy-day">-</span> <span class="wiui-rqyy-month">-</span> </div> <div class="wiui-rqyy-text"> <span class="wiiui-rqyy-yy">加载中...</span> </div> <div class="wiui-rqyy-btn"> <div id="wiui-yybtn"> <span class="wiui-rqyy-msg">换一句</span> <i class="fa fa-dot-circle-o wiui-rqyy-icon" aria-hidden="true"></i> </div> </div> </div> </div> <script> $(function () { var myDate = new Date(); var mon = myDate.getMonth() + 1; var day = myDate.getDate(); var newMon = mon < 10 ? "0" + mon : mon; var newDay = day < 10 ? "0" + day : day; var rqyyLock = true; var randRYY = parseInt(Math.random() * 10); $(".wiui-rqyy-item").css( "background-image", "url(https://img.lizll.com/rqyy-imgs/rqyy-bg-" + randRYY + ".png)" ); $(".wiui-rqyy-day").html(newDay); $(".wiui-rqyy-month").html(newMon); $.extend({ yyAjax: function () { $.ajax({ // 链接 url: "https://api.btstu.cn/yan/api.php?charset=utf-8&encode=json", // 请求方法 type: "GET", // 成功返回 dataType: "json", success: function (e) { rqyyLock = false; var yiyanList = e.text.split(""); var newYY = ""; var yyIndex = 0; var timer = setInterval(function () { newYY += yiyanList[yyIndex]; yyIndex++; if (yyIndex >= yiyanList.length) { clearInterval(timer); rqyyLock = true; } $(".wiiui-rqyy-yy").html(newYY); }, 150); } }); } }); $.yyAjax(); $("#wiui-yybtn").click(function () { if (!rqyyLock) return; $.yyAjax(); }); }); $(".wiui-rqyy-demo").parent().parent().css({ padding: "0", overflow: "hidden" }); </script> ``` <p></p></div></div></div> ## ****FPS帧率显示**** <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-a2a93fac34d7937da64efb96fcbfe5f440" aria-expanded="true"><div class="accordion-toggle"><span>FPS帧率显示</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-a2a93fac34d7937da64efb96fcbfe5f440" class="collapse collapse-content"><p></p> 自定义javascript代码: ```js // FPS帧 $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;"></div>'); 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){ console.log(fps+'FPS'); $('#fps').html(fps+'FPS'); }; step(); })(); ``` <p></p></div></div></div> ## 网站左侧联系站长按钮 <div class="panel panel-default collapse-panel box-shadow-wrap-lg"><div class="panel-heading panel-collapse" data-toggle="collapse" data-target="#collapse-f06a05394df65c52f2a2aead162455154" aria-expanded="true"><div class="accordion-toggle"><span>网站左侧联系站长按钮</span> <i class="pull-right fontello icon-fw fontello-angle-right"></i> </div> </div> <div class="panel-body collapse-panel-body"> <div id="collapse-f06a05394df65c52f2a2aead162455154" class="collapse collapse-content"><p></p> 自定义头部HTML代码: ```html <a href="//wpa.qq.com/msgrd?v=3&uin=757604673&site=qq&menu=yes" target="_blank" class="contact-help main-shadow" style="font-weight:700;" />联系站长</a><style>.contact-help{position: fixed; z-index: 101; left: 0; top: calc(50% - 30px); margin-top: -36px; width: 28px; height: 72px; transition: all .3s; font-size: 12px;background: var(--main-bg-color);border-radius: 0 5px 5px 0; padding: 8px 7px; line-height: 14px;}@media screen and (max-width: 768px){.contact-help{display:none;}}</style> ``` <p></p></div></div></div> 最后修改:2022 年 08 月 28 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏