js realizes the common functions of the mall 1. Product view Click on the picture to pop-up a pop-up window to display the product picture; 2. Enlarge the selected picture area

Insert picture description here

<!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%;
				/*margin-top: -200px;*/
				/*margin-left: -250px;*/
				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]
//		遍历所有li
		for(var i=0; i<li.length;i++){
    
    
//			绑定点击事件
			li[i].onclick = function(){
    
    
//				console.log(this)
//				通过this找到当前点击的li,再找到当前点击的li下面的img的src属性
				var lujing = this.getElementsByTagName("img")[0].src
//				将显示出来的盒模型的背景图片的路径变成之前获取的src的值
				div.style.backgroundImage = "url("+lujing+")"
//				将盒模型显示出来
				div.style.display = "block"
			}
		}
//		按钮绑定点击事件
		btn.onclick = function(){
    
    
//			让盒模型消失掉
			div.style.display = "none"
		}
	</script>
</html>

Insert picture description here

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
    
    
				margin: 0;
				padding: 0;
			}
			
			.yi{
    
    
				width: 300px;
				height: 500px;
				/*border: 1px solid gray;*/
				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){
    
    
//			console.log(this.offsetLeft)
			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}
			
//			console.log(x)
			fdj.style.left = x+"px"
			fdj.style.top = y+"px"
			
			ertu.style.left = -x*2+"px"
			ertu.style.top = -y*2+"px"
		}
	</script>
</html>

js realizes the common functions of the mall 1. Product view Click on the picture to pop-up a pop-up window to display the product picture; 2. Enlarge the selected picture area

Guess you like