<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> * { margin: 0; padding: 0; } body { background: #333; } #pageContent { width: 1000px; height: 750px; overflow: hidden; position: relative; margin: 5px auto; } #imgContainer { width: 1000px; height: 750px; } @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); } .material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; } i.material-icons { font-size: 24px; color: white; position: relative; border-radius: 50%; padding: 5px; margin: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: color 0.2s ease, background-color 0.2s ease, transform 0.3s ease; } i.material-icons:hover { background-color: transparent; transform: rotate(90deg); cursor: pointer; box-shadow: none; } </style> <div id="pageContent"> <div id="imgContainer"> <img id="imageFullScreen" style="display:block;" src="20190514094105947_4k.jpg"> </div> <div style="position:fixed; bottom:0;1000px;text-align:center;"> <i class="material-icons" onclick="imgRotate()" title="向右旋转">refresh</i> </div> </div> <script src="jquery.min.js?v=2.1.4"></script> <script src="e-smart-zoom-jquery.js"></script> <script> var current = 0; $(function () { $('#imageFullScreen').smartZoom({'containerClass': 'zoomableContainer'}); }); function imgRotate() { current = (current + 90) % 360; $('#imgContainer').css("transform", "rotate(" + current + "deg)"); } </script> </body> </html>
ps:需要先下载e-smart-zoom-jquery.js到本地