<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 1000px;
display: block;
margin: 150px auto;
}
ul>li{
float: left;
}
li>img{
width: 200px;
height: 150px;
}
div{
position: fixed;
width: 500px;
height: 400px;
border: 1px solid gray;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
background-size: 100% 100%;
}
button{
width: 50px;
height: 50px;
background: none;
border: none;
font-size: 30px;
position: absolute;
top: 0;
right: 0;
text-align: center;
line-height: 50px;
}
button:hover{
background: red;
}
</style>
</head>
<body>
<ul>
<li><img src="../img/5c416c4a0fda2.jpg"/></li>
<li><img src="../img/5c749f8f64d08.jpg"/></li>
<li><img src="../img/5c749fe3f038c.jpg"/></li>
<li><img src="../img/5c74a290b752c.jpg"/></li>
<li><img src="../img/QQ图片20190103152502.jpg"/></li>
</ul>
<div>
<button>x</button>
</div>
</body>
<script>
var li = document.getElementsByTagName("li")
var btn = document.getElementsByTagName("button")[0]
var div = document.getElementsByTagName("div")[0]
for(var i=0; i<li.length;i++){
li[i].onclick = function(){
var lujing = this.getElementsByTagName("img")[0].src
div.style.backgroundImage = "url("+lujing+")"
div.style.display = "block"
}
}
btn.onclick = function(){
div.style.display = "none"
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.yi{
width: 300px;
height: 500px;
margin: 100px 0 0 100px;
float: left;
position: relative;
}
.er{
width: 300px;
height: 500px;
position: relative;
float: left;
margin-top: 100px;
display: none;
overflow: hidden;
}
.yi>img{
width: 100%;
height: 100%;
}
.er>img{
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 0;
}
.fdj{
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
background: rgba(100,100,100,0.5);
display: none;
}
.aaa{
display: block;
}
</style>
</head>
<body>
<div class="yi">
<img src="../img/QQ图片20190226121753.jpg" >
<div class="fdj"></div>
</div>
<div class="er">
<img src="../img/QQ图片20190226121753.jpg" >
</div>
</body>
<script>
var yi = document.getElementsByClassName("yi")[0]
var fdj = document.getElementsByClassName("fdj")[0]
var er = document.getElementsByClassName("er")[0]
var ertu = document.getElementsByTagName("img")[1]
yi.onmouseover = function(){
fdj.className = "fdj aaa"
er.className = "er aaa"
}
yi.onmouseout = function(){
fdj.className = "fdj"
er.className = "er"
}
yi.onmousemove = function(event){
var x = event.clientX-this.offsetLeft-fdj.offsetWidth/2
var y = event.clientY-this.offsetTop-fdj.offsetHeight/2
if(x<0){x=0}
if(y<0){y=0}
if(x>this.offsetWidth-fdj.offsetWidth){x=this.offsetWidth-fdj.offsetWidth}
if(y>this.offsetHeight-fdj.offsetHeight){y=this.offsetHeight-fdj.offsetHeight}
fdj.style.left = x+"px"
fdj.style.top = y+"px"
ertu.style.left = -x*2+"px"
ertu.style.top = -y*2+"px"
}
</script>
</html>