js實現圖片預覽可旋轉、放大縮小功能實現

使用jquery.magnify.js 實現圖片操作的功能

本地瀏覽器如果是ie8及以上可以直接用,如果ie8需要將插件做下修改
代碼修改前:

icons: {
      minimize: '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
                <path fill="currentColor" d="M1024 749.714v109.714c0 50.286\
                -41.143 91.429-91.429 91.429h-841.143c-50.286 0-91.429-41.143\
                -91.429-91.429v-109.714c0-50.286 41.143-91.429 91.429-91.429\
                h841.143c50.286 0 91.429 41.143 91.429 91.429z"></path>\
                </svg>',
      maximize: '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
                <path fill="currentColor" d="M146.286 804.571h731.429v-438.857\
                h-731.429v438.857zM1024 164.571v694.857c0 50.286-41.143 91.429\
                -91.429 91.429h-841.143c-50.286 0-91.429-41.143-91.429-91.429v\
                -694.857c0-50.286 41.143-91.429 91.429-91.429h841.143c50.286 0 \
                91.429 41.143 91.429 91.429z"></path>\
                </svg>',
      close: '<svg viewBox="0 0 804.5714285714286 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M741.714 755.429c0 14.286-5.714 \
              28.571-16 38.857l-77.714 77.714c-10.286 10.286-24.571 16-38.857 16\
              s-28.571-5.714-38.857-16l-168-168-168 168c-10.286 10.286-24.571 16\
              -38.857 16s-28.571-5.714-38.857-16l-77.714-77.714c-10.286-10.286\
              -16-24.571-16-38.857s5.714-28.571 16-38.857l168-168-168-168c-10.286\
              -10.286-16-24.571-16-38.857s5.714-28.571 16-38.857l77.714-77.714\
              c10.286-10.286 24.571-16 38.857-16s28.571 5.714 38.857 16l168 168 \
              168-168c10.286-10.286 24.571-16 38.857-16s28.571 5.714 38.857 \
              16l77.714 77.714c10.286 10.286 16 24.571 16 38.857s-5.714 28.571\
              -16 38.857l-168 168 168 168c10.286 10.286 16 24.571 16 38.857z"></path>\
              </svg>',
      zoomIn: '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M585.143 457.143v36.571c0 9.714-8.571 \
              18.286-18.286 18.286h-128v128c0 9.714-8.571 18.286-18.286 18.286\
              h-36.571c-9.714 0-18.286-8.571-18.286-18.286v-128h-128c-9.714 0\
              -18.286-8.571-18.286-18.286v-36.571c0-9.714 8.571-18.286 18.286\
              -18.286h128v-128c0-9.714 8.571-18.286 18.286-18.286h36.571c9.714 0 \
              18.286 8.571 18.286 18.286v128h128c9.714 0 18.286 8.571 18.286 \
              18.286zM658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857\
              -256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857\
              c0 40.571-32.571 73.143-73.143 73.143-19.429 0-38.286-8-51.429\
              -21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857\
              -222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 \
              402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228\
              l196 196c13.143 13.143 21.143 32 21.143 51.429z"></path>\
              </svg>',
      zoomOut: '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M585.143 457.143v36.571c0 9.714-8.571 \
              18.286-18.286 18.286h-329.143c-9.714 0-18.286-8.571-18.286-18.286\
              v-36.571c0-9.714 8.571-18.286 18.286-18.286h329.143c9.714 0 18.286 \
              8.571 18.286 18.286zM658.286 475.429c0-141.143-114.857-256-256-256\
              s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256z\
              M950.857 950.857c0 40.571-32.571 73.143-73.143 73.143-19.429 0\
              -38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857\
              -228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 \
              402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143\
              -70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"></path>\
              </svg>',
      prev: '<svg viewBox="0 0 914.2857142857142 1024" class="svg-inline-icon">\
            <path fill="currentColor" d="M877.714 512v73.143c0 38.857-25.714 \
            73.143-66.857 73.143h-402.286l167.429 168c13.714 13.143 21.714 32 \
            21.714 51.429s-8 38.286-21.714 51.429l-42.857 43.429c-13.143 13.143\
            -32 21.143-51.429 21.143s-38.286-8-52-21.143l-372-372.571c-13.143\
            -13.143-21.143-32-21.143-51.429s8-38.286 21.143-52l372-371.429c13.714\
            -13.714 32.571-21.714 52-21.714s37.714 8 51.429 21.714l42.857 42.286\
            c13.714 13.714 21.714 32.571 21.714 52s-8 38.286-21.714 52l-167.429 \
            167.429h402.286c41.143 0 66.857 34.286 66.857 73.143z"></path>\
            </svg>',
      next: '<svg viewBox="0 0 841.1428571428571 1024" class="svg-inline-icon">\
            <path fill="currentColor" d="M841.143 548.571c0 19.429-7.429 38.286\
            -21.143 52l-372 372c-13.714 13.143-32.571 21.143-52 21.143s-37.714\
            -8-51.429-21.143l-42.857-42.857c-13.714-13.714-21.714-32.571-21.714\
            -52s8-38.286 21.714-52l167.429-167.429h-402.286c-41.143 0-66.857\
            -34.286-66.857-73.143v-73.143c0-38.857 25.714-73.143 66.857-73.143\
            h402.286l-167.429-168c-13.714-13.143-21.714-32-21.714-51.429s8\
            -38.286 21.714-51.429l42.857-42.857c13.714-13.714 32-21.714 51.429\
            -21.714s38.286 8 52 21.714l372 372c13.714 13.143 21.143 32 21.143 \
            51.429z"></path>\
            </svg>',
      fullscreen: '<svg viewBox="0 0 1097.142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M365.714 329.143c0 60.571-49.143 \
                  109.714-109.714 109.714s-109.714-49.143-109.714-109.714 49.143\
                  -109.714 109.714-109.714 109.714 49.143 109.714 109.714z\
                  M950.857 548.571v256h-804.571v-109.714l182.857-182.857 91.429 \
                  91.429 292.571-292.571zM1005.714 146.286h-914.286c-9.714 0\
                  -18.286 8.571-18.286 18.286v694.857c0 9.714 8.571 18.286 \
                  18.286 18.286h914.286c9.714 0 18.286-8.571 18.286-18.286\
                  v-694.857c0-9.714-8.571-18.286-18.286-18.286zM1097.143 164.571\
                  v694.857c0 50.286-41.143 91.429-91.429 91.429h-914.286c-50.286 \
                  0-91.429-41.143-91.429-91.429v-694.857c0-50.286 41.143-91.429 \
                  91.429-91.429h914.286c50.286 0 91.429 41.143 91.429 91.429z"></path>\
                  </svg>',
      actualSize: '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M733.143 309.143l-202.857 202.857 \
                  202.857 202.857 82.286-82.286c10.286-10.857 26.286-13.714 40-8 \
                  13.143 5.714 22.286 18.857 22.286 33.714v256c0 20-16.571 36.571\
                  -36.571 36.571h-256c-14.857 0-28-9.143-33.714-22.857-5.714\
                  -13.143-2.857-29.143 8-39.429l82.286-82.286-202.857-202.857\
                  -202.857 202.857 82.286 82.286c10.857 10.286 13.714 26.286 8 \
                  39.429-5.714 13.714-18.857 22.857-33.714 22.857h-256c-20 0\
                  -36.571-16.571-36.571-36.571v-256c0-14.857 9.143-28 22.857\
                  -33.714 13.143-5.714 29.143-2.857 39.429 8l82.286 82.286 \
                  202.857-202.857-202.857-202.857-82.286 82.286c-6.857 6.857\
                  -16 10.857-25.714 10.857-4.571 0-9.714-1.143-13.714-2.857\
                  -13.714-5.714-22.857-18.857-22.857-33.714v-256c0-20 16.571\
                  -36.571 36.571-36.571h256c14.857 0 28 9.143 33.714 22.857 \
                  5.714 13.143 2.857 29.143-8 39.429l-82.286 82.286 202.857 \
                  202.857 202.857-202.857-82.286-82.286c-10.857-10.286-13.714\
                  -26.286-8-39.429 5.714-13.714 18.857-22.857 33.714-22.857h256\
                  c20 0 36.571 16.571 36.571 36.571v256c0 14.857-9.143 28-22.286 \
                  33.714-4.571 1.714-9.714 2.857-14.286 2.857-9.714 0-18.857-4\
                  -25.714-10.857z"></path>\
                  </svg>',
      rotateLeft: '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M877.714 512c0 241.714-197.143 \
                  438.857-438.857 438.857-130.857 0-254.286-57.714-337.714-158.286\
                  -5.714-7.429-5.143-18.286 1.143-24.571l78.286-78.857c4-3.429 \
                  9.143-5.143 14.286-5.143 5.143 0.571 10.286 2.857 13.143 6.857 \
                  56 72.571 140 113.714 230.857 113.714 161.143 0 292.571-131.429 \
                  292.571-292.571s-131.429-292.571-292.571-292.571c-74.857 0\
                  -145.714 28.571-198.857 78.286l78.286 78.857c10.857 10.286 \
                  13.714 26.286 8 39.429-5.714 13.714-18.857 22.857-33.714 22.857\
                  h-256c-20 0-36.571-16.571-36.571-36.571v-256c0-14.857 9.143-28 \
                  22.857-33.714 13.143-5.714 29.143-2.857 39.429 8l74.286 73.714\
                  c80.571-76 189.714-121.143 302.286-121.143 241.714 0 438.857 \
                  197.143 438.857 438.857z"></path>\
                  </svg>',
      rotateRight: '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                    <path fill="currentColor" d="M877.714 146.286v256c0 20-16.571 \
                    36.571-36.571 36.571h-256c-14.857 0-28-9.143-33.714-22.857\
                    -5.714-13.143-2.857-29.143 8-39.429l78.857-78.857c-53.714\
                    -49.714-124.571-78.286-199.429-78.286-161.143 0-292.571 \
                    131.429-292.571 292.571s131.429 292.571 292.571 292.571\
                    c90.857 0 174.857-41.143 230.857-113.714 2.857-4 8-6.286 \
                    13.143-6.857 5.143 0 10.286 1.714 14.286 5.143l78.286 78.857\
                    c6.857 6.286 6.857 17.143 1.143 24.571-83.429 100.571-206.857 \
                    158.286-337.714 158.286-241.714 0-438.857-197.143-438.857\
                    -438.857s197.143-438.857 438.857-438.857c112.571 0 221.714 \
                    45.143 302.286 121.143l74.286-73.714c10.286-10.857 26.286\
                    -13.714 40-8 13.143 5.714 22.286 18.857 22.286 33.714z"></path>\
                    </svg>'
    }

代碼修改後:

icons: {
      minimize:  isIE8() ? '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
    	  		<image xlink:href="'+cmnPath+'images/ssuc.png" src="'+cmnPath+'images/ssuc.png" width="35" height="35" />\
                </svg>':
                '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
                <path fill="currentColor" d="M1024 749.714v109.714c0 50.286\
                -41.143 91.429-91.429 91.429h-841.143c-50.286 0-91.429-41.143\
                -91.429-91.429v-109.714c0-50.286 41.143-91.429 91.429-91.429\
                h841.143c50.286 0 91.429 41.143 91.429 91.429z"></path>\
                </svg>',
      maximize: isIE8() ? '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
    		  	<image xlink:href="'+cmnPath+'images/zuofei.png" src="'+cmnPath+'images/zuofei.png" width="30" height="30" />\
                </svg>' :
                '<svg viewBox="0 0 1024 1024" class="svg-inline-icon">\
                <path fill="currentColor" d="M146.286 804.571h731.429v-438.857\
                h-731.429v438.857zM1024 164.571v694.857c0 50.286-41.143 91.429\
                -91.429 91.429h-841.143c-50.286 0-91.429-41.143-91.429-91.429v\
                -694.857c0-50.286 41.143-91.429 91.429-91.429h841.143c50.286 0 \
                91.429 41.143 91.429 91.429z"></path>\
                </svg>',
      close: isIE8() ? '<svg viewBox="0 0 804.5714285714286 1024" class="svg-inline-icon">\
	    		  <image xlink:href="'+cmnPath+'images/magnify/close.png" src="'+cmnPath+'images/magnify/close.png" width="30" height="30" />\
	              </svg>' :
              '<svg viewBox="0 0 804.5714285714286 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M741.714 755.429c0 14.286-5.714 \
              28.571-16 38.857l-77.714 77.714c-10.286 10.286-24.571 16-38.857 16\
              s-28.571-5.714-38.857-16l-168-168-168 168c-10.286 10.286-24.571 16\
              -38.857 16s-28.571-5.714-38.857-16l-77.714-77.714c-10.286-10.286\
              -16-24.571-16-38.857s5.714-28.571 16-38.857l168-168-168-168c-10.286\
              -10.286-16-24.571-16-38.857s5.714-28.571 16-38.857l77.714-77.714\
              c10.286-10.286 24.571-16 38.857-16s28.571 5.714 38.857 16l168 168 \
              168-168c10.286-10.286 24.571-16 38.857-16s28.571 5.714 38.857 \
              16l77.714 77.714c10.286 10.286 16 24.571 16 38.857s-5.714 28.571\
              -16 38.857l-168 168 168 168c10.286 10.286 16 24.571 16 38.857z"></path>\
              </svg>',
      zoomIn: isIE8() ? '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
    		  <image xlink:href="'+cmnPath+'images/magnify/zoomIn.png" src="'+cmnPath+'images/magnify/zoomIn.png" width="35" height="35" />\
              </svg>' :
              '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M585.143 457.143v36.571c0 9.714-8.571 \
              18.286-18.286 18.286h-128v128c0 9.714-8.571 18.286-18.286 18.286\
              h-36.571c-9.714 0-18.286-8.571-18.286-18.286v-128h-128c-9.714 0\
              -18.286-8.571-18.286-18.286v-36.571c0-9.714 8.571-18.286 18.286\
              -18.286h128v-128c0-9.714 8.571-18.286 18.286-18.286h36.571c9.714 0 \
              18.286 8.571 18.286 18.286v128h128c9.714 0 18.286 8.571 18.286 \
              18.286zM658.286 475.429c0-141.143-114.857-256-256-256s-256 114.857\
              -256 256 114.857 256 256 256 256-114.857 256-256zM950.857 950.857\
              c0 40.571-32.571 73.143-73.143 73.143-19.429 0-38.286-8-51.429\
              -21.714l-196-195.429c-66.857 46.286-146.857 70.857-228 70.857\
              -222.286 0-402.286-180-402.286-402.286s180-402.286 402.286-402.286 \
              402.286 180 402.286 402.286c0 81.143-24.571 161.143-70.857 228\
              l196 196c13.143 13.143 21.143 32 21.143 51.429z"></path>\
              </svg>',
      zoomOut: isIE8() ? '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
    		  <image xlink:href="'+cmnPath+'images/magnify/zoomOut.png" src="'+cmnPath+'images/magnify/zoomOut.png" width="35" height="35" />\
              </svg>':
              '<svg viewBox="0 0 950.8571428571428 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M585.143 457.143v36.571c0 9.714-8.571 \
              18.286-18.286 18.286h-329.143c-9.714 0-18.286-8.571-18.286-18.286\
              v-36.571c0-9.714 8.571-18.286 18.286-18.286h329.143c9.714 0 18.286 \
              8.571 18.286 18.286zM658.286 475.429c0-141.143-114.857-256-256-256\
              s-256 114.857-256 256 114.857 256 256 256 256-114.857 256-256z\
              M950.857 950.857c0 40.571-32.571 73.143-73.143 73.143-19.429 0\
              -38.286-8-51.429-21.714l-196-195.429c-66.857 46.286-146.857 70.857\
              -228 70.857-222.286 0-402.286-180-402.286-402.286s180-402.286 \
              402.286-402.286 402.286 180 402.286 402.286c0 81.143-24.571 161.143\
              -70.857 228l196 196c13.143 13.143 21.143 32 21.143 51.429z"></path>\
              </svg>',
      prev: isIE8() ? '<svg viewBox="0 0 914.2857142857142 1024" class="svg-inline-icon">\
    		  <image xlink:href="'+cmnPath+'images/magnify/prev.png" src="'+cmnPath+'images/magnify/prev.png" width="35" height="35" />\
    		  </svg>' : 
    		  '<svg viewBox="0 0 914.2857142857142 1024" class="svg-inline-icon">\
              <path fill="currentColor" d="M877.714 512v73.143c0 38.857-25.714 \
              73.143-66.857 73.143h-402.286l167.429 168c13.714 13.143 21.714 32 \
              21.714 51.429s-8 38.286-21.714 51.429l-42.857 43.429c-13.143 13.143\
              -32 21.143-51.429 21.143s-38.286-8-52-21.143l-372-372.571c-13.143\
              -13.143-21.143-32-21.143-51.429s8-38.286 21.143-52l372-371.429c13.714\
              -13.714 32.571-21.714 52-21.714s37.714 8 51.429 21.714l42.857 42.286\
              c13.714 13.714 21.714 32.571 21.714 52s-8 38.286-21.714 52l-167.429 \
              167.429h402.286c41.143 0 66.857 34.286 66.857 73.143z"></path>\
              </svg>',
      next: isIE8() ? '<svg viewBox="0 0 841.1428571428571 1024" class="svg-inline-icon">\
    		  	<image xlink:href="'+cmnPath+'images/magnify/next.png" src="'+cmnPath+'images/magnify/next.png" width="35" height="35" />\
	            </svg>' : 
	            '<svg viewBox="0 0 841.1428571428571 1024" class="svg-inline-icon">\
	            <path fill="currentColor" d="M841.143 548.571c0 19.429-7.429 38.286\
	            -21.143 52l-372 372c-13.714 13.143-32.571 21.143-52 21.143s-37.714\
	            -8-51.429-21.143l-42.857-42.857c-13.714-13.714-21.714-32.571-21.714\
	            -52s8-38.286 21.714-52l167.429-167.429h-402.286c-41.143 0-66.857\
	            -34.286-66.857-73.143v-73.143c0-38.857 25.714-73.143 66.857-73.143\
	            h402.286l-167.429-168c-13.714-13.143-21.714-32-21.714-51.429s8\
	            -38.286 21.714-51.429l42.857-42.857c13.714-13.714 32-21.714 51.429\
	            -21.714s38.286 8 52 21.714l372 372c13.714 13.143 21.143 32 21.143 \
	            51.429z"></path>\
	            </svg>',
      fullscreen: isIE8() ? '<svg viewBox="0 0 1097.142857142857 1024" class="svg-inline-icon">\
    		  		<image xlink:href="'+cmnPath+'images/magnify/fullscreen.png" src="'+cmnPath+'images/magnify/fullscreen.png" width="35" height="35" />\
                  </svg>' : 
                  '<svg viewBox="0 0 1097.142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M365.714 329.143c0 60.571-49.143 \
                  109.714-109.714 109.714s-109.714-49.143-109.714-109.714 49.143\
                  -109.714 109.714-109.714 109.714 49.143 109.714 109.714z\
                  M950.857 548.571v256h-804.571v-109.714l182.857-182.857 91.429 \
                  91.429 292.571-292.571zM1005.714 146.286h-914.286c-9.714 0\
                  -18.286 8.571-18.286 18.286v694.857c0 9.714 8.571 18.286 \
                  18.286 18.286h914.286c9.714 0 18.286-8.571 18.286-18.286\
                  v-694.857c0-9.714-8.571-18.286-18.286-18.286zM1097.143 164.571\
                  v694.857c0 50.286-41.143 91.429-91.429 91.429h-914.286c-50.286 \
                  0-91.429-41.143-91.429-91.429v-694.857c0-50.286 41.143-91.429 \
                  91.429-91.429h914.286c50.286 0 91.429 41.143 91.429 91.429z"></path>\
                  </svg>',
      actualSize: isIE8() ? '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
    		  		<image xlink:href="'+cmnPath+'images/magnify/actualSize.png" src="'+cmnPath+'images/magnify/actualSize.png" width="35" height="35" />\
                  </svg>' : 
                  '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M733.143 309.143l-202.857 202.857 \
                  202.857 202.857 82.286-82.286c10.286-10.857 26.286-13.714 40-8 \
                  13.143 5.714 22.286 18.857 22.286 33.714v256c0 20-16.571 36.571\
                  -36.571 36.571h-256c-14.857 0-28-9.143-33.714-22.857-5.714\
                  -13.143-2.857-29.143 8-39.429l82.286-82.286-202.857-202.857\
                  -202.857 202.857 82.286 82.286c10.857 10.286 13.714 26.286 8 \
                  39.429-5.714 13.714-18.857 22.857-33.714 22.857h-256c-20 0\
                  -36.571-16.571-36.571-36.571v-256c0-14.857 9.143-28 22.857\
                  -33.714 13.143-5.714 29.143-2.857 39.429 8l82.286 82.286 \
                  202.857-202.857-202.857-202.857-82.286 82.286c-6.857 6.857\
                  -16 10.857-25.714 10.857-4.571 0-9.714-1.143-13.714-2.857\
                  -13.714-5.714-22.857-18.857-22.857-33.714v-256c0-20 16.571\
                  -36.571 36.571-36.571h256c14.857 0 28 9.143 33.714 22.857 \
                  5.714 13.143 2.857 29.143-8 39.429l-82.286 82.286 202.857 \
                  202.857 202.857-202.857-82.286-82.286c-10.857-10.286-13.714\
                  -26.286-8-39.429 5.714-13.714 18.857-22.857 33.714-22.857h256\
                  c20 0 36.571 16.571 36.571 36.571v256c0 14.857-9.143 28-22.286 \
                  33.714-4.571 1.714-9.714 2.857-14.286 2.857-9.714 0-18.857-4\
                  -25.714-10.857z"></path>\
                  </svg>'	  ,
      rotateLeft: isIE8() ? '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
    		  		<image xlink:href="'+cmnPath+'images/magnify/rotateLeft.png" src="'+cmnPath+'images/magnify/rotateLeft.png" width="35" height="35" />\
                  </svg>' : 
                  '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                  <path fill="currentColor" d="M877.714 512c0 241.714-197.143 \
                  438.857-438.857 438.857-130.857 0-254.286-57.714-337.714-158.286\
                  -5.714-7.429-5.143-18.286 1.143-24.571l78.286-78.857c4-3.429 \
                  9.143-5.143 14.286-5.143 5.143 0.571 10.286 2.857 13.143 6.857 \
                  56 72.571 140 113.714 230.857 113.714 161.143 0 292.571-131.429 \
                  292.571-292.571s-131.429-292.571-292.571-292.571c-74.857 0\
                  -145.714 28.571-198.857 78.286l78.286 78.857c10.857 10.286 \
                  13.714 26.286 8 39.429-5.714 13.714-18.857 22.857-33.714 22.857\
                  h-256c-20 0-36.571-16.571-36.571-36.571v-256c0-14.857 9.143-28 \
                  22.857-33.714 13.143-5.714 29.143-2.857 39.429 8l74.286 73.714\
                  c80.571-76 189.714-121.143 302.286-121.143 241.714 0 438.857 \
                  197.143 438.857 438.857z"></path>\
                  </svg>'	  ,
      rotateRight: isIE8() ? '<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
    		  			<image xlink:href="'+cmnPath+'images/magnify/rotateLeft.png" src="'+cmnPath+'images/magnify/rotateLeft.png" width="35" height="35" />\
                    	</svg>' :
                    	'<svg viewBox="0 0 877.7142857142857 1024" class="svg-inline-icon">\
                        <path fill="currentColor" d="M877.714 146.286v256c0 20-16.571 \
                        36.571-36.571 36.571h-256c-14.857 0-28-9.143-33.714-22.857\
                        -5.714-13.143-2.857-29.143 8-39.429l78.857-78.857c-53.714\
                        -49.714-124.571-78.286-199.429-78.286-161.143 0-292.571 \
                        131.429-292.571 292.571s131.429 292.571 292.571 292.571\
                        c90.857 0 174.857-41.143 230.857-113.714 2.857-4 8-6.286 \
                        13.143-6.857 5.143 0 10.286 1.714 14.286 5.143l78.286 78.857\
                        c6.857 6.286 6.857 17.143 1.143 24.571-83.429 100.571-206.857 \
                        158.286-337.714 158.286-241.714 0-438.857-197.143-438.857\
                        -438.857s197.143-438.857 438.857-438.857c112.571 0 221.714 \
                        45.143 302.286 121.143l74.286-73.714c10.286-10.857 26.286\
                        -13.714 40-8 13.143 5.714 22.286 18.857 22.286 33.714z"></path>\
                        </svg>'	
    },

說明一下:ie8不支持svg標籤,所以將path替換成image標籤直接引入圖片。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章