chengnan
/
s202226701001


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
    <style tyle="text/css">
      html,body{
        width: 100%;
        height: 100%;
      }

      #mainViewContainer {
        width: 95%;
        height: 95%;
        border: 1px solid black;
        margin: 10px;
        padding: 3px;
        overflow: hidden;
      }

      #mainView {
        width: 100%;
        height: 100%;
        min-height: 100%;
        display: inline;
      }

      .thumbViewClass {
        border: 1px solid black;
        position: absolute;
        bottom: 5px;
        left: 5px;
        width: 20%;
        height: 30%;
        margin: 3px;
        padding: 3px;
        overflow: hidden;
      }

      #thumbView {
        z-index: 110;
        background: white;
      }

      #scopeContainer {
        z-index: 120;
      }
    </style>
  </head>

  <body>

    <div id="mainViewContainer">
      <embed id="mainView" type="image/svg+xml" src="tiger.svg"/>
    </div>

    <div id="thumbViewContainer">
      <svg id="scopeContainer" class="thumbViewClass">
        <g>
          <rect id="scope" fill="red" fill-opacity="0.1" stroke="red" stroke-width="2px" x="0" y="0" width="0" height="0"/>
          <line id="line1" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
          <line id="line2" stroke="red" stroke-width="2px" x1="0" y1="0" x2="0" y2="0"/>
        </g>
      </svg>
      <embed id="thumbView" type="image/svg+xml" src="tiger.svg" class="thumbViewClass"/>
    </div>

    <script src="../dist/svg-pan-zoom.js" type="text/javascript" ></script>
    <script src="./thumbnailViewer.js" type="text/javascript" ></script>

    <script type="text/javascript">
      thumbnailViewer({mainViewId: 'mainView',thumbViewId: 'thumbView'});
    </script>
  </body>

</html>