京东商品图片放缩

Posted LWJ_jay

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了京东商品图片放缩相关的知识,希望对你有一定的参考价值。

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

  效果:

 

 

以上是关于京东商品图片放缩的主要内容,如果未能解决你的问题,请参考以下文章

京东商品列表采集

仿淘宝京东商品图片放大预览功能

网络爬虫-爬取京东商品评价数据

爬取京东上商品的所有详细信息

写个简单的chrome插件-京东商品历史价格查询

京东商品详情页采集