谁有类似淘宝的放大镜功能

2016-07-07 16:23 来源：www.chinab4c.com 作者：ecshop专家

淘宝的很简单的，谁知道的么？

d.jpg

我在网上找到一个代码段，JS的，谁能帮我看下，是不是这个，如果是的话怎么使用？


  2. <script>
  3. if(typeof(qsoft) == "undefined")
  4. qsoft = {};

  6. qsoft.PopBigImage = function (origImageId,dx,dy)
  7. {
  8. this.oim = document.getElementById(origImageId);

  10. this.oim.style.cursor = "crosshair";

  12. this.ow = this.oim.width;
  13. this.oh = this.oim.height;

  15. this.detaX = dx?dx : 30;
  16. this.detaY = dy?dy : 0;

  18. this.getAbsSize = function (obj)
  19. {
  20. return obj.getBoundingClientRect();
  21. };

  23. var rect = this.getAbsSize(this.oim);
  24. this.ol = rect.left + this.detaX + this.ow;
  25. this.ot = rect.top + this.detaY;

  27. this.src = this.oim.src;

  29. this.getImageSize = function (img)
  30. {
  31. var im = new Image();
  32. im.src = img.src;

  34. var size = {};
  35. size.width = im.width;
  36. size.height = im.height;

  38. im = null;
  39. delete im;

  41. return size;
  42. };

  44. var rsize = this.getImageSize(this.oim);
  45. this.w = rsize.width;
  46. this.h = rsize.height;

  48. var qObj = this;

  50. this.createMask = function ()
  51. {
  52. if(typeof(this.mask) == "undefined")
  53. {
  54. this.mask = document.createElement("div");
  55. this.mask.id = this.oim.id + "_mask";

  57. this.mask.style.position= "absolute";
  58. this.mask.style.width = this.ow;
  59. this.mask.style.height = this.oh;
  60. this.mask.style.left = this.ol;
  61. this.mask.style.top = this.ot;
  62. this.mask.style.backgroundImage= "url("+this.src+")";
  63. this.mask.style.backgroundRepeat = "no-repeat";
  64. this.mask.style.display ="none";

  66. document.body.appendChild(this.mask);

  68. //this.mask.style = "position: absolute; ";//left: "+this.ol+"; top: "+this.ot+";width: " + this.ow + "; height: " + this.oh + ";
  69. ///*display: none;*/ background: url(" + this.src + ") left top no-repeat;";
  70. }
  71. };

  73. this.regEvent = function ()
  74. {
  75. this.oim.onmousemove = function ()
  76. {
  77. var x = Math.ceil(event.offsetX * qObj.w/qObj.ow) - qObj.ow/2;
  78. var y = Math.ceil(event.offsetY * qObj.h/qObj.oh) - qObj.oh/2;

  80. if(x<0) x = 0;
  81. if(y<0) y = 0;

  83. var maxx = Math.ceil((qObj.w-qObj.ow));
  84. var maxy = Math.ceil((qObj.h-qObj.oh));

  86. if(x>maxx) x = maxx;
  87. if(y>maxy) y = maxy;

  89. qObj.mask.style.backgroundPositionX = -x;
  90. qObj.mask.style.backgroundPositionY = -y;
  91. };

  93. this.oim.onmouseout = function (e)
  94. {
  95. qObj.mask.style.display = "none";
  96. };

  98. this.oim.onmouseenter = function (e)
  99. {
  100. qObj.mask.style.display = "block";
  101. };

  103. };

  105. this.render = function ()
  106. {
  107. this.createMask();
  108. this.regEvent();
  109. };
  110. };

  112. qsoft.version = 0.1;
  113. window.onload = function (){
  114. var pbi = new qsoft.PopBigImage("orig",24,-2);
  115. pbi.render();
  116. }

  118. </script>
  119. <img src="images/200905/source_img/1226569902610916918.jpg" id="orig" alt="天子星" width="250" height="250" style="margin-top:60px;" />
复制代码

回答：
自己沙发先