wordpress切换背景图

作者 : 黑域吧 本文共1018个字,预计阅读时间需要3分钟 发布时间: 2020-02-20 共49.22K人阅读

学了jsDOM事件时,遇到onchange这个事件,就想到wordpress弄个下拉框切换背景图,好久没折腾wordpress,这次来折腾一下~

效果图见博客左上角背景切换按钮~(PC端才有~)

把以下js放到wordpress header.php文件head标签之间~

Js code

<script>
        window.onload = jb;
        function jb(){
            var bgcolor=document.getElementById('bg');
            bgcolor.onchange=function(){
                var num=bgcolor.value;
                console.log(num);
                document.body.className="body";
 
                if(num=="1"){
                    document.body.className="bodya";
                }
                else if(num=="2"){
                    document.body.className="bodyb";
                }
                else if(num=="3"){
                    document.body.className="bodyc";
                }
          else {
 
                 document.body.className="null";
 
                }
            }
 
        }
    </script>

将一下样式放在你的style.css样式文件种(部分主题可能命名不一样)样式中得图片自行替换(注意图片路径)

Css code

     .bodya {
            background-image: url("img/1.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .bodyb {
            background-image: url("img/2.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .bodyc {
            background-image: url("img/3.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }

切换选项放在那个位置,得你自己定~

html code

<select name="" id="bg">
    <option value="">请选择</option>
    <option value="1">壁纸一</option>
    <option value="2">壁纸二</option>
    <option value="3">壁纸三</option>
</select>

 

提示:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:(332547532@qq.com)
2. 分享目的仅供大家学习和交流,请不要用于商业用途!QQ群: 10563080
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请点击右下方联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码请在"下载框架提示方寻找",如遇到无法解压的请联系管理员!
黑域吧资源网 » wordpress切换背景图

常见问题FAQ

本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
邮箱:(332547532@qq.com)

发表评论