凡客商品放大镜效果

最新推荐文章于 2024-09-21 23:59:03 发布

liubo0523

最新推荐文章于 2024-09-21 23:59:03 发布

阅读量225

点赞数 1

文章标签： css 凡客 html js

本文链接：https://blog.csdn.net/liubo0523/article/details/55669329

版权

这是js代码：

  var x = 0;
  var y = 0;
  var i = 0;
  var j = 0;
  function show_coords(obj)
  {	
	  var left = document.getElementById("left");
	  var tu = document.getElementById("tu");
	  /*alert(ab.clientHeight);*/
	  x = event.clientX;
	  y = event.clientY;
	  /*alert(x+"和"+y);*/
	  x = parseFloat(x);
	  y = parseFloat(y);
	  if (x < 110)
	  {
		  left.style.left = 0;
	  }else if (x > 290)
	  {
		  left.style.left = 180 + "px";
	  }else{
		  left.style.left = (x - 110) + "px";
	  }
	  if (y < 100)
	  {
		  left.style.top = 0;
	  }else  if (y > 300)
	  {
		  left.style.top = 200 + "px";
	  }else{
	  left.style.top = (y - 100) + "px";
	  }
	  /*for (var key in obj)
	  {
		  document.write(key + "   " + obj[key] + "
");
	  }*/
	  i = left.style.left;
	  j = left.style.top;
	  i = parseFloat(i);
	  j = parseFloat(j);
	  tu.style.marginLeft = -2 * i + "px";
	  tu.style.marginTop = -2 * j + "px";
  }

这是html+css的：