网页点击图片放大，再点就返回原状态 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">.container {
      margin: 50px;
      max-width: 700px;
    }
    .container img {
      width: 100%;
    }
    .container .pull-left {
      width: 55%;
      float: left;
      margin: 20px 20px 20px -80px;
    }
    @media (min-width: 750px) {
      body {
        font-size: 16px;
        line-height: 1.6;
      }
      .container {
        margin: 100px auto;
      }
        </style>
    <link rel="stylesheet" type="text/css" href="css/zoom.css">
</head>
<body oncut="return false;"oncopy = "return false;" onpaste = "return false;">
    <form id="form1" runat="server">
    <div>

                        <td class="auto-style26" rowspan="5" style="text-align: left">
                            <asp:Image ID="tx1" runat="server" Height="160px" Width="400px"  ImageUrl='' data-action="zoom"   AlternateText='<%# " " %>'  />
                        </td>
                  
    </div>
        <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap-3.3.4.js"></script>
        <script src="js/zoom.js"></script>
    </form>
</body>
</html>

 绿色标记是实现效果的关键

需要jquery.min.js   bootstrap-3.3.4.js    zoom.js,并且最后三行的位置一定要放在最后的</div>后边

posted @ 2021-01-09 11:31  myrj  阅读(261)  评论(0)    收藏  举报