锦绣前程3future 2019-05-21 13:16 采纳率: 33.3%
浏览 224
已采纳

求助大佬，咋使这个js让所有为id标签的图片转起来

下边这个js能使网页上的图像转动起来，但是我想知道怎么能让所有的id为img的都转起来呢

        <script>
            var rotateVal = 0 // 旋转角度
            var InterVal // 定时器
            window.onload = function () {
                // 网页加载完成后即运行rotate函数
                rotate()
                // 鼠标悬浮在图片上时，停止旋转，即清除定时器
                document.getElementById('img').onmousemove = function () {
                    clearInterval(InterVal)
                }
                // 鼠标离开图片时，继续旋转，即继续运行定时器
                document.getElementById('img').onmouseleave = function () {
                    rotate()
                }
            }

            // 设置定时器
            function rotate () {
                InterVal = setInterval(function () {
                    var img = document.getElementById('img')
                    rotateVal += 1
                    // 设置旋转属性(顺时针)
                    img.style.transform = 'rotate(' + rotateVal + 'deg)'
                    // 设置旋转属性(逆时针)
                    //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                    // 设置旋转时的动画  匀速0.1s
                    img.style.transition = '0.1s linear'
                }, 100)
            }
        </script>
  • 写回答

1条回答 默认 最新

  • 易烊千玺的女朋友 2019-05-22 10:56
    关注

    你是多张图片的id都为img，还是只有一张图片id为img，id具有唯一性

    我还是上代码吧，id改为class，id就相当于你的身份证，一个人只有一个身份证号，也就是说你的代码中的getElementsByClassName('img')只会找到一个img标签，但是class不一样，会找到所有类为class的标签，但是 rotate ()的函数的style就得更改写法，因为class找到后会以数组形式存在

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

        <img src="./share-orange.png" alt="" class="img">
        <img src="./share-orange.png" alt="" class="img">


    <script>
        var rotateVal = 0 // 旋转角度
        var InterVal // 定时器
        window.onload = function () {
            // 网页加载完成后即运行rotate函数
            rotate()
            // 鼠标悬浮在图片上时，停止旋转，即清除定时器
            document.getElementsByClassName('img').onmousemove = function () {
                clearInterval(InterVal)
            }
            // 鼠标离开图片时，继续旋转，即继续运行定时器
            document.getElementsByClassName('img').onmouseleave = function () {
                rotate()
            }
        }

        // 设置定时器
        function rotate () {
            InterVal = setInterval(function () {
                var img = document.getElementsByClassName('img')
                rotateVal += 1
                // 设置旋转属性(顺时针)

                for(var i=0;i<img.length;i++){
                    img[i].style.transform = 'rotate(' + rotateVal + 'deg)'
                }
                // 设置旋转属性(逆时针)
                //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                // 设置旋转时的动画  匀速0.1s
                img.style.transition = '0.1s linear'
            }, 100)
        }
    </script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位，为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后，界面没有，cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置