京东商品图片放缩
html部分:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box {
border: 2px solid #111;
width: 200px;
height: 200px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box" data-big-img="goods-big.gif">
<img src="goods.gif" alt="">
</div>
<script type="text/javascript" src="xuzoom.js"></script>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box')
xuzoom(box, {
offsetWidth: 200,
offsetHeight: 200,
offsetX: 10,
offsetY: 0
})
}
</script>
</body>
</html>
css部分:
@charset "utf-8";
#box {
border: 2px solid #000;
width: 430px;
height: 430px;
margin: 0 auto;
position: relative;
}
#box .sweepBox{
width: 215px;
height: 215px;
position: absolute;
background: url(../images/bgg.png);
cursor: move;
opacity: .4;
display: none;
}
.show{
width: 430px;
height: 430px;
position: absolute;
left: 435px;
top: 0px;
background: url(../images/2.jpg) no-repeat;
display: none;
}
js部分：
window.onload = function() {
var box = document.getElementById('box'); //获取盒子id
var box_image = box.querySelector('img'); //获取原图
var sweepBox = box.getElementsByClassName('sweepBox')[0]; //获取扫描盒子
var show = document.querySelector('.show'); //获取显示图片的盒子
var width = box_image.offsetWidth; //原图片的宽
var height = box_image.offsetHeight; //原图片的高
// 扫描框宽高
var sweepW = width / 2,
sweepH = height / 2,
// 扫描框移动的度量宽高（用来计算鼠标在扫描盒子的移动量，在加上扫描盒子当前的offsetleft值就是盒子最终的位置）
stepW = sweepW / 2,
stepH = sweepH / 2;
/*确认鼠标从哪个方向进入盒子，从而确认移动盒子的初始位置*/
box.onmouseenter = function(e) {
function load(x, y) {
// 扫描框的横纵坐标偏移量
var offsetX = offsetY = 0
// 不知用什么switch表达式好，所以用了如下方法来判断位置，你有没有好方法？
switch([(x - sweepW) > 0, (y - sweepH) > 0].join(',')) {
case 'false,true':
// 左下
offsetY = sweepH;
break;
case 'false,false':
// 左上
break;
case 'true,false':
// 右上
offsetX = sweepW;
break;
case 'true,true':
// 右下
offsetX = sweepW;
offsetY = sweepH;
break;
};
/* //第二种方法
if(x-sweepW>0){
if(y-sweepH<0){
offsetX = sweepW;
}
else{
offsetX = sweepW;
offsetY = sweepH;
}
}
else{
if(y-sweepH>0){
offsetY = sweepH;
}
}*/
/*设置扫描盒子的初始位置*/
sweepBox.style.left = offsetX + 'px';
sweepBox.style.top = offsetY + 'px';
sweepBox.style.display = 'block';
/*设置显示盒子的内容*/
show.style.backgroundPositionX = -offsetX * 2 + 'px';
show.style.backgroundPositionY = -offsetY * 2 + 'px';
show.style.display = 'block';
}
load(e.offsetX, e.offsetY);
};
/*扫描盒子的鼠标经过事件*/
sweepBox.onmousemove = function(e) {
/*扫描盒子的移动量*/
var moveX = e.offsetX - stepW;
var moveY = e.offsetY - stepH;
// 扫描框当前的偏移量
var offsetL = this.offsetLeft;
var offsetT = this.offsetTop;
// 计算出扫描盒子移动的最终坐标
var toX, toY;
// 沿x轴往右移动，并且扫描框右边界还没有碰到图片右边缘，那么可以移动，并且移动的距离最远到图片右边缘
if(moveX > 0 && offsetL < sweepW) {
toX = Math.min(offsetL + moveX, sweepW); /*因为扫描盒子的位置在0到图片的一半*/
}
// 与之相反，沿x轴往左移动，那么判断左边界未碰到图片左边缘，移动并且移动最左只能到0
if(moveX < 0 && offsetL > 0) {
toX = Math.max(offsetL + moveX, 0)
}
// y轴雷同
if(moveY > 0 && offsetT < sweepH) {
toY = Math.min(offsetT + moveY, sweepH);
}
if(moveY < 0 && offsetT > 0) {
toY = Math.max(offsetT + moveY, 0);
}
/*设置扫描盒子的最终位置*/
sweepBox.style.left = toX + 'px';
sweepBox.style.top = toY + 'px';
/*设置显示盒子内容位置*/
show.style.backgroundPositionX = -toX * 2 + 'px';
show.style.backgroundPositionY = -toY * 2 + 'px';
}
/*注销事件*/
box.onmouseleave = function() {
sweepBox.style.display = 'none';
show.style.display = 'none';
}
}
效果:
