wordpress切换背景图~

学了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>

为TA充电
共{{data.count}}人
人已赞赏
wordpress教程

wordpress自定义后台个人资料页面

2019-6-19 0:39:14

wordpress教程

wordpress主题制作-介绍篇

2020-2-22 11:19:33

2 条回复 A文章作者 M管理员
  1. 挺有趣的,找特效可以来这里了,哈哈!

    • 欢迎 欢迎~

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索