切换背景
2019-03-11 本文已影响0人
Wo信你个鬼
b.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.menu{
width: 160px;
position: absolute;
border: 1px solid #666;
display: none;
background: #fff;
z-index: 999;
}
.menu li{
width: 100%;
height: 40px;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #CACACA;
font-size: 20px;
cursor: pointer;
}
.menu li:last-of-type{
border-bottom: none;
}
.selBackground{
width: 600px;
height: 300px;
border: 1px solid #777777;
border-radius: 20px;
background: #E4E4E4;
overflow: hidden;
position: absolute;
left: 50%;
top: 50%;
transition: 500ms;
transform:translate(-50%,-50%) scale(0);
-webkit-transform:translate(-50%,-50%) scale(0);
}
.title{
width: 100%;
height: 50px;
text-align: center;
font-size: 26px;
background: linear-gradient(to bottom,#666,#999);
color: #fff;
font-weight: bold;
}
.imgBox{
width: 100%;
height: 250px;
padding: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
}
.imgBox li{
width: 160px;
cursor: pointer;
}
.imgBox li img{
width: 100%;
}
.back{
font-size: 30px;
color: #fff;
position: absolute;
top: 2px;
right: 20px;
cursor: pointer;
font-weight: normal;
}
</style>
</head>
<body>
<ul class="menu">
<li>切换背景</li>
<li>功能1</li>
<li>功能2</li>
<li>功能3</li>
<li>功能4</li>
<li>功能5</li>
</ul>
<div class="selBackground">
<p class="title">选择背景<span class="back">x</span></p>
<!--ul>li*6>img[src=img/$.jpg]-->
<ul class="imgBox">
<li><img src="img/1.jpg" alt="" /></li>
<li><img src="img/2.jpg" alt="" /></li>
<li><img src="img/3.jpg" alt="" /></li>
<li><img src="img/4.jpg" alt="" /></li>
<li><img src="img/5.jpg" alt="" /></li>
<li><img src="img/6.jpg" alt="" /></li>
</ul>
</div>
<script type="text/javascript">
let menu = document.querySelector(".menu"),
menuLi = menu.querySelectorAll("li"),
imgBigBox = document.querySelector(".selBackground"),
imgBoxLi = imgBigBox.querySelectorAll("li"),
back = imgBigBox.querySelector(".back"),
windowX = window.innerWidth,
windowH = window.innerHeight;
//鼠标右键弹出菜单
document.addEventListener("contextmenu",(e)=>{
e.preventDefault();
//判断右键是否在选择图片的区域内点击
let clickPath = e.path.splice(0,e.path.length-2);
let res = clickPath.some((val,index)=>{
return val.classList.contains("selBackground");
})
if(res==false){
menu.style.display = "block";
}else{
menu.style.display = "none";
}
//判断鼠标点击位置是否在边缘
if(e.clientX+menu.offsetWidth >= windowX && e.clientY+menu.offsetHeight < windowH){
menu.style.left = e.clientX -menu.offsetWidth +"px";
menu.style.top = e.clientY+"px";
}else if(e.clientY+menu.offsetHeight >= windowH && e.clientX+menu.offsetWidth < windowX){
menu.style.left = e.clientX+"px";
menu.style.top = e.clientY - menu.offsetHeight+"px";
}else if(e.clientY+menu.offsetHeight >= windowH && e.clientX+menu.offsetWidth >= windowX){
menu.style.left = e.clientX -menu.offsetWidth +"px";
menu.style.top = e.clientY - menu.offsetHeight+"px";
}else{
menu.style.left = e.clientX+"px";
menu.style.top = e.clientY+"px";
}
})
document.onclick = function(){//点击其他地方，隐藏菜单弹窗
menu.style.display = "none";
}
//点击选择背景
menuLi[0].addEventListener("mousedown",()=>{
//先缩放再位移，与先位移再缩放，效果是不一样的。
imgBigBox.style.transform = "translate(-50%,-50%) scale(1)";
menu.style.display="none";
})
//切换背景
for(let i=0;i<imgBoxLi.length;i++){
cutBackground(imgBoxLi[i]);
}
function cutBackground(obj){
obj.addEventListener("click",()=>{
let bgSrc = obj.children[0].src;
document.body.style.background = "url("+bgSrc+")";
})
}
//点击返回键，隐藏imgBigBox
back.onclick = function(){
imgBigBox.style.transform = "translate(-50%,-50%) scale(0)"
}
</script>
</body>
</html>
