京东商品图片放缩

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';
	}
}

　　效果:

　

　

posted @ 2017-10-25 18:10  LWJ_jay  阅读(370)  评论(0)    收藏  举报