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

最新推荐文章于 2023-04-28 15:07:10 发布

sage_wang

最新推荐文章于 2023-04-28 15:07:10 发布

阅读量668

点赞数 1

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

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

版权

自学Flask 专栏收录该内容

5 篇文章 8 订阅

订阅专栏

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

点击按钮实现向左或者向右旋转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)');
})

sage_wang

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自学 Flask 系列（四）多种方式，实现点击按钮图片旋转

多种方式，实现点击按钮图片旋转点击按钮实现向左或者向右旋转90度，点击四次也就是直至旋转到360度，恢复原状，方法一、js实现<!DOCTYPE html><html><head> <title>图片旋转</title> <script> window.onload = function(){ var current = 0; docume
复制链接

扫一扫