Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转 

<!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;width: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到本地

posted @ 2018-12-28 09:49  liw66  阅读(1228)  评论(0)  编辑  收藏  举报