0
点赞
收藏
分享

微信扫一扫

js图片放大缩小

雪域迷影 2022-05-16 阅读 54

js图片放大缩小_javascript

最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试);第二种方法只能兼容IE。

第一种方法很简单,代码如下:


查看文本打印?

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <style type="text/css">
  7. img
  8. {
  9. border:#000000 1px solid;
  10. }
  11. </style>
  12. <script language="javascript" type="text/javascript">
  13. //兼容IE和火狐
  14. function ImageChange(args) {
  15. var oImg = document.getElementById("img1");
  16. if (args) {
  17. oImg.width = oImg.width * 1.2;
  18. oImg.height = oImg.height * 1.2;
  19. }
  20. else {
  21. oImg.width = oImg.width / 1.2;
  22. oImg.height = oImg.height / 1.2;
  23. }
  24. }
  25. </script>
  26. </head>
  27. <body>
  28. <form id="form1" runat="server">
  29. <div>
  30. <img id="img1" alt="<strong>图片</strong>" src="images/img1.gif" mce_src="images/img1.gif"/>
  31. <br />
  32. <input id="btn1" type="button" value="<strong>放大</strong>" onclick="ImageChange(true)" />
  33. <input id="btn2" type="button" value="<strong>缩小</strong>" onclick="ImageChange(false)" />
  34. </div>
  35. </form>
  36. </body>
  37. </html>



第二种方法也简单,就是把中间的js方法改变一下,然后给图片框加上 >


查看文本打印?

  1. var oImg = document.getElementById("img1");
  2. oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';




举报

相关推荐

0 条评论