使用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