自学 Flask 系列（四）多种方式，实现点击按钮图片旋转

最新推荐文章于 2024-04-02 09:52:48 发布

sage_wang

最新推荐文章于 2024-04-02 09:52:48 发布

阅读量708

点赞数 1

分类专栏：自学Flask 文章标签： jquery

本文链接：https://blog.csdn.net/sage_wang/article/details/109185194

版权

自学Flask 专栏收录该内容

5 篇文章 8 订阅

订阅专栏

本文介绍了在Flask应用中，通过两种方法——JavaScript和jQuery，实现在点击按钮后图片进行90度旋转的效果，循环至360度时恢复原状。

摘要由CSDN通过智能技术生成

多种方式，实现点击按钮图片旋转

点击按钮实现向左或者向右旋转90度，点击四次也就是直至旋转到360度，恢复原状，

方法一、js实现


<!DOCTYPE html>
<html>
<head>
    <title>图片旋转</title>
    <script>
        window.onload = function(){ 
            var current = 0;
            document.getElementById('rotate').onclick = function(){
                current = (current+90)%360;
                this.style.transform = 'rotate('+current+'deg)';
            }
        };
    </script>
</head>
<body>
    <img id ="rotate" src="">
</body>
</html>

方法二、jQuery实现

<button class="btn btn-default" style="float: right;" type="button" id="rotate_image">旋转图片</button>
<img src="xx" id="img1">

var r = 0
$("#rotate_image").on('click', function () {
    img_lists = [];
    img_lists.push($("#img1").attr('src'))
    r += 90
    $("#img1").css('transform', 'rotate('+r+'deg)');
})