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到本地

转载于:https://www.cnblogs.com/liw66/p/10188748.html

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值