黑马程序员技术交流社区

标题: js 模拟淘宝京东物品图片的局部放大 [打印本页]
作者: 李琼    时间: 2012-11-6 23:50
标题: js 模拟淘宝京东物品图片的局部放大
本帖最后由 李琼 于 2012-11-6 23:54 编辑
  1. <html>
  2. <head>
  3. <title>emu</title>
  4. </head>
  5. <body>
  6. 原图：
  7. <img src="落花.jpg" onMouseMove="zoom()" id=srcImg>
  8. 局部放大图：
  9. <div style="overflow:hidden"><img id=zoomImg></div>
  10. <SCRIPT LANGUAGE="JavaScript">
  11. <!--
  12. zoomImg.src = srcImg.src;
  13. srcImg.height = srcImg.height/2;
  14. var zoomRate = 5;
  15. zoomImg.height = srcImg.height*zoomRate;
  16. zoomImg.parentNode.style.width = srcImg.width;
  17. zoomImg.parentNode.style.height = srcImg.height;
  18. function zoom(){
  19. var elm = event.srcElement;
  20. h = elm.offsetHeight/zoomRate/2;
  21. w = elm.offsetWidth/zoomRate/2;
  22. var x = event.x-elm.offsetLeft;
  23. x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;
  24. zoomImg.style.marginLeft=(w-x)*zoomRate;
  25. var y = event.y-elm.offsetTop;
  26. y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;
  27. zoomImg.style.marginTop=(h-y)*zoomRate;
  28. }
  29. //-->
  30. </SCRIPT>
  31. </body>
  32. </html>
复制代码
附件已上传，两种方法。



局部放大.rar

96.15 KB, 下载次数: 131
作者: 奋斗的青春    时间: 2012-11-7 09:36
学习了 。




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2