版权声明：官方：www.bugs-net.cn https://blog.csdn.net/qq_41514928/article/details/83037116
百度换肤JavaScript功能
CSS-code:
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
a{
color: red;
text-decoration: none;
}
body{
background: url(./images/1.png);
background-size: cover;
}
.nav{
width: 100%;
height: 40px;
background: rgba(255, 255, 255, 0.4);
border-bottom: 1px solid #ccc;
}
.navIn{
width: 100px;
height: 40px;
margin: 0 auto;
line-height: 40px;
}
.shadow{
width: 100px;
height: 100px;
background: transparent;
position: fixed;
left: 0;
top: 0;
display: none;
}
.menu{
width: 1000px;
height: 200px;
background: #fff;
position: absolute;
left: 50%;
top: -200px;
margin-left: -500px;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
transition:top 1s;/*点击弹出的速度*/
}
.menu img{
width: 120px;
margin-top: 50px;
cursor:pointer;
}
</style>
HTML-code:
<body id="bg">
<nav class="nav">
<div class="navIn">
<a id="btn" href="javascript:;">点击换肤</a>
</div>
</nav>
<div id="shadow" class="shadow"></div>
<div id="menu" class="menu">
<!--图片路径-->
<img src="./images/1.png" alt="">
<img src="./images/2.jpg" alt="">
<img src="./images/3.jpg" alt="">
<img src="./images/4.jpg" alt="">
<img src="./images/5.jpg" alt="">
</div>
JavaScript-code：
<script type="text/javascript">
/*获取属性*/
var oBg = document.getElementById('bg');
var oBtn = document.getElementById('btn');
var oShadow = document.getElementById('shadow');
var oMenu = document.getElementById('menu');
var oImg = oMenu.getElementsByTagName('img');
oBtn.onclick = function(){
oShadow.style.display = 'black';
oMenu.style.top = '0px';
}
oShadow.onclick = function(){
oShadow.style.display = 'none';
oMenu.style.top = '-210px';
}
oImg[0].onclick = function(){
oBg.style.backgroundImage = 'url(./images/1.png)';//url(./images/1.png）这个是图片的路径，点击之后的图片路径。
}
oImg[1].onclick = function(){
oBg.style.backgroundImage = 'url(./images/2.jpg)';
}
oImg[2].onclick = function(){
oBg.style.backgroundImage = 'url(./images/3.jpg)';
}
oImg[3].onclick = function(){
oBg.style.backgroundImage = 'url(./images/4.jpg)';
}
oImg[4].onclick = function(){
oBg.style.backgroundImage = 'url(./images/5.jpg)';
}
</script>
效果截图:
详情：
还有JavaScript特效功能无法以动态图演示出来，如果需要预览可以通过下方下载源代码地址进行下载到你到desktop上在进行本地预览，谢谢！
希望有更多前端编程爱好者加入我们到官方群聊一起交流：773680934！
QQ:1733454706!