<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>单个商品详细信息</title>
<link rel="stylesheet" type="text/css" href="home/CSS/productInfo.css">
<link rel="stylesheet" type="text/css" href="home/CSS/footer.css">
<link rel="shortcut icon" href="home/img/favicon.ico" type="home/img/favicon.ico">
<script type="text/javascript" src="home/JS/jquery.min.js"></script>
<script type="text/javascript" src="home/JS/main.js"></script>
</head>
<body>
<div class="w">
<div class="product-img">
<div class="zoom">
<div class="small_area">
<img src="home/img/${pro.imgurl}" width="400" height="400"/>
<span class="mask"></span>
</div>
</div>
<div class="big_area">
<img src="home/img/${pro.imgurl}" width="620" height="620"/>
</div>
</div>
</div>
<div class="product-details">
<h1>${pro.description}</h1>
<p class="re"><span>积分可抵500元</span><span>购物送积分</span></p>
<div class="price">
<span>全球最低价格: </span>
<span class="price">￥${pro.price }元</span>
</div>
<p id="goods_name" ><span>品牌: </span>${pro.name }</p>
<ul class="details">
<li><span>颜色选择:</span><a class="u-check n-check">${pro.color }</a></li>
<c:if test="${not empty pro.memory}">
<li><span>内存:</span><a class="u-check n-check">${pro.memory }</a></li>
</c:if>
<li><span>产品类型:</span><a class="u-check n-check">${pro.type }</a></li>
<li><span>购买数量:</span>
<div class="count-box">
<input class="min" name="" type="button" value="-"/>
<input class="text-box" name="num" type="text" value="1" id="num"/>
<input class="add" name="" type="button" value="+"/>
</div>
</li>
</ul>
<div class="action">
<a class="addCar" onclick="addProductToCart('${pro.id}')"><i></i>加入购物车</a>
<a class="buy" onclick="send()" >立即购买</a>
</div>
</div>
</body>
</html>
<script>
// 获取相应节点元素
var zoom = document.querySelector('.zoom');
var simg = document.querySelector('.small_area img');
var bimg = document.querySelector('.big_area img');
var big = document.querySelector('.big_area');
var small = document.querySelector('.small_area');
var mask = document.querySelector('.mask');
// 设置遮罩层宽高 小图宽 除以 大图宽 乘以 大显示区域边框
mask.style.width = (simg.offsetWidth/bimg.offsetWidth)*big.clientWidth+"px";
mask.style.height = (simg.offsetHeight/bimg.offsetHeight)*big.clientHeight+"px";
// 定义遮罩层最大边距，也就是最大移动距离
var maxW = simg.clientWidth - mask.offsetWidth;
var maxH = simg.clientHeight - mask.offsetHeight;
// 鼠标移入小显示区域发生事件：1.遮罩层显示 2.大显示区域显示
small.onmouseenter=function(){
mask.style.left = 0;
big.style.left = 410+"px";
}
// 鼠标移入小显示区域发生事件：1.遮罩层消失 2.大显示区域消失
small.onmouseleave=function(){
mask.style.left = -10000+"px";
big.style.left = -10000+"px";
}
// 鼠标在小显示区域移动
small.onmousemove=function(e){
// 解决兼容问题
e = e || window.event;
// 定义两个变量 让鼠标位置一直处于遮罩层位置中间
var nLeft = e.pageX-zoom.offsetLeft-zoom.clientLeft-mask.offsetWidth/2;
var nTop = e.pageY-zoom.offsetTop-zoom.clientTop-mask.offsetHeight/2;
// 设置遮罩层永远显示在小显示区域内部 也就是判断nLeft、nTop值
nLeft = Math.min(maxW,Math.max(0,nLeft));
nTop = Math.min(maxH,Math.max(0,nTop));
// 遮罩层位置
mask.style.left = nLeft+"px";
mask.style.top = nTop+"px";
// 设置大图片移动位置 跟随遮罩层百分比移动（语法带入）
bimg.style.left = -(bimg.offsetWidth-big.clientWidth)*(nLeft/(simg.clientWidth-mask.offsetWidth))+"px";
bimg.style.top = -(bimg.offsetHeight-big.clientHeight)*(nTop/(simg.clientHeight-mask.offsetHeight))+"px";
}
</script>
<script type="text/javascript">
var span=document.getElementsByTagName('a');
span.Style.color='black';
</script>
```
