wordpress切换背景图~

久伴
久伴
久伴
452
文章
493
评论
2020年2月10日23:42:48 2 60 1018字阅读3分23秒

学了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>
久伴
  • 本文由 发表于 2020年2月10日23:42:48
Array数组_concat_slice方法 JavaScript

Array数组_concat_slice方法

concat 使用说明:合并二个或者多个数组为一个数组 使用例子: var a=,b=,c=a.concat(b); console.log(c); 输出结果: slice 使用说明:选择数组元素 使...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • avatar 林三 2

      挺有趣的,找特效可以来这里了,哈哈!

        • 久伴 久伴

          回复 林三 欢迎 欢迎~