美文网首页
图片旋转预览

图片旋转预览

作者: welcomeHere | 来源:发表于2017-10-18 10:03 被阅读0次

    1.dom

    <div>
        <div class="rotate-icon">
            ![](/src/assets/image/rotate_r.png)
            ![](/src/assets/image/rotate_r.png)
        </div>
        <div>
            ```
                ![](filePath)
            ```
            ![](filePath)
        </div>
    </div>
    

    2.js

    引入jquery旋转插件
    <script src="/src/assets/js/jquery.rotate.js"></script>
    // 旋转图片
    rotateImg(type) {
        let rot = this.rot;
        if (type == "left") {
            if (rot === -360) {
                rot = 0;
            }
            rot -= 90;
            $("#rotImg").rotate(-90);
        }
        if (type == "right") {
            if (rot === 360) {
                rot = 0;
            }
            rot += 90;
            $("#rotImg").rotate(90);
        }
        this.rot = rot;
    },
    

    相关文章

      网友评论

          本文标题:图片旋转预览

          本文链接:https://www.haomeiwen.com/subject/yoeqjxtx.html