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