JS实现网站换肤
更新时间：2022年07月01日 16:19:45 作者：锅大虾
这篇文章主要为大家详细介绍了JS实现网站换肤，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现网站换肤的具体代码，供大家参考，具体内容如下
先看效果
1、左侧是待选择的图片列表
2、点击对应图片自动为当前网站换背景图片
3、为当前选择的图片加个2px的border
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网站换肤</title>
<style>
body {
background: url(images/abc-123.jpg) no-repeat center;
}
ul li {
list-style: none;
}
.baidu img {
width: 100px;
}
.baidu li:hover img {
border: 1px solid red;
}
</style>
</head>
<body>
<ul class="baidu">
<li><img src="images/Colorful-Abstraction01.jpg" alt=""></li>
<li><img src="images/Colorful-Abstraction02.jpg" alt=""></li>
<li><img src="images/Colorful-Abstraction03.jpg" alt=""></li>
<li><img src="images/abc-123.jpg" alt=""></li>
</ul>
<script>
// 获取元素
var imgs = document.querySelectorAll("img");
// 注册事件并处理
for(var i = 0; i < imgs.length; i++){
imgs[i].onclick = function(){
document.body.style.backgroundImage = "url(" + this.src + ")";
for(var i = 0; i < imgs.length; i++){
imgs[i].style.border = "none";
}
this.style.border = "2px solid red";
}
}
</script>
</body>
</html>×为当前选择的图片加2px边框前，需要使用for循环初始化所有图片的边框，不然点击一个就会产生一个边框。
for(var i = 0; i < imgs.length; i++){
imgs[i].style.border = "none";
}接着再为当前选择的图片加上边框
this.style.border = "2px solid red";
×为body更换背景图片时，需要注意css的写法backgroundImage， 且还需注意js中字符换和变量的拼接方法
document.body.style.backgroundImage = "url(" + this.src + ")"以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果，这篇文章主要介绍了layUI布局使用教程,需要的朋友可以参考下2022-09-09
这篇文章主要为大家详细介绍了js通过循环多张图片实现动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了Javascript动画的实现原理浅析,本文用两个实例来解释Javascript动画的实现原理,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS事件绑定的常用方式,结合实例形式总结分析了javascript三种常见的事件绑定原理与操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了原生js一行代码实现简易轮播图功能，本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了小程序实现多列选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
jquery的$(document).ready()和onload的加载顺序
最近在改一个嵌入在frame中的页面的时候，使用了jquery做效果，而页面本身也绑定了onload事件。改完后，Firefox下测试正常流畅，IE下就要等个十几秒jquery的效果才出现，黄花菜都凉了。2010-05-05
JavaScript hasOwnProperty() 函数实例详解
hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性。下面通过本文给大家分享JavaScript hasOwnProperty() 函数实例讲解，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要介绍了javascript中sort()的用法,实例分析了sort()的功能、定义及使用技巧,需要的朋友可以参考下2015-01-01
javascript学习随笔(使用window和frame)的技巧
javascript学习随笔(使用window和frame)的技巧...2007-03-03
最新评论