子比主题自适应PC/手机端背景+背景图片切换[子比教程]

子比主题自适应PC/手机端背景+背景图片切换[子比教程]

前言

这是很久之前就弄好的,一直不发是没时间写文章和一直失业中,没心情发。所以现在才分享出来,话不多说,直接写教程。

使用教程

防止白嫖,请评论阅读教程。

第一步:创建悬浮切换按钮

创建悬浮按钮主要是切换背景图片,把下面HTML代码添加到悬浮内容里,直接看下图片,自己琢磨。

<div class="wiiuii-qh"></div>
图片[1]-子比主题自适应PC/手机端背景+背景图片切换[子比教程]-星语的小木屋

第二步:添加CSS代码

在主题后台——》自定义CSS样式,添加下面css代码。

/*背景图body样式*/
body{-webkit-background-size:cover!important;-moz-background-size:cover!important;-o-background-size:cover;background-size:cover;background-repeat:no-repeat;background-position:50%;cursor:pointer;background-attachment:fixed;z-index:-1}
body:before{content:"";position:fixed;z-index:-1;top:0;right:0;bottom:0;left:0;background-image:inherit;-webkit-background-size:cover!important;-o-background-size:cover;background-size:cover!important}

第三步:添加jQuery代码

添加jQuery之前,看一下有没有添加layui的layer库,什么是layer?自己百度,主要是弹窗的。

layer添加在自定义底部HTML代码,先看看自己以前有没有添加,别添加太多,不然卡死。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.6.8/layui.min.js"></script>

然后在主题后台——》自定义javascript代码,添加下面jQuery代码。

说明:”wiuiImgNum”是图片总数,我定义的是9张,看到我“img.wiiuii.cn”链接的是我的图片链接的调用,自己改为自己的链接路径,图片命名是手机端“wiuiAz-x.jpg”,PC端是“wiuiPc-x.jpg”,X是序号(0-9)。不建议使用我的,自己改一下

效果

子比主题自适应PC/手机端背景+背景图片切换[子比教程]

温馨提示:本文最后更新于2025-03-03 01:03:47,某些文章具有时效性,若有错误或已失效,请私信客服或联系知新社长
© 版权声明
三月 3

知岛上的今时往日

THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸Ta
夸夸
还有吗!没看够!
取消
昵称表情代码图片

    暂无评论内容

社区求救信号帮助是一种美德