masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - css旋转，点击按钮让图片旋转
PHP中文网
PHP中文网 2017-04-10 17:41:57
0
3
333

现在有一个按钮，每次点击按钮后，让图片旋转90度，应该怎么做？

PHP中文网
PHP中文网

认证高级PHP讲师

membalas semua(3)
Peter_Zhu
Peter_Zhu2017-04-10 17:43:57 Tingkat 3

直接上demo好了，代码写的仓促，但是大概流程就是这样

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="zp" />
        <title>图片旋转</title>
        <style type="text/css">
            #img{
                border: 1px solid #000;
                display: block;
            }
        </style>
    </head>
    <body>
        <img src="logo.png" id="img" /> 
        <button id="button">旋转</button>
        <script type="text/javascript">
            var deg = 0;
            document.getElementById("button").onclick = function () {
                deg += 90;
                document.getElementById("img").style.transform = "rotate(" + deg + "deg)";
            }
        </script>
    </body>
</html>
Suka +0
Tambah Balasan
大家讲道理
大家讲道理2017-04-10 17:43:57 Tingkat 2

css3有这个新加的属性，可以通过设置transform:rotate值来实现…

Suka +0
Tambah Balasan
阿神
阿神2017-04-10 17:43:57 Tingkat 1

也可以用Jquery的rotate实现

Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan