锦绣前程3future 2019-05-21 14:29 采纳率: 22.2%
浏览 333
已采纳

求助，大佬怎么让上边这2个图片都转动呢

现在的情况是只能转左边的（我尝试过复制一份js然后调用img1，但是第二个也不能转）
求助大佬


<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="3Future,三维书屋,前程锦绣">
<title>三维书屋|前程锦绣</title>
 <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e4e2853a486fb45e2a89553ce641d3a2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
        <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>


<style>

*{border:0px;
margin:0px;}


body{
text-align:center;
background-image:url(./11.jpg);

}


#nav  ul {
height:40px;       
margin-left:12%;
margin-right:12%;
padding:0;
list-style:none;   
border-top:solid 5px #DAA520;    
border-bottom:solid 5px #DAA520; 
background:url(./22.jpg);  
margin-bottom:25px;
}

#nav ul li {
float:left;
text-align:center;
width:25%;
font:20px/2 "microsoft yahei";
}

#nav ul li a {
text-decoration:none;
color:#800080;
}

#nav ul li a:hover {
display:block; 
color:#FFFFFF; 
background:#cfc0aa;
 }



    div{
    display:block;
    font:50px/2  "microsoft yahei";
    color:#4793c9;
    clear:both;
    }
    span {
    font:25px/2  "microsoft yahei";
    color:#3a7baa;
    }

    div img{
    width:130px;
    border:2px solid blue;
    vertical-align: middle;
    margin-bottom:10px;
    }
  </style>
 </head>
 <body>


<div style="margin-top:20px;margin-bottom:10px;">
 <img id="img" src="http://www.longge.cc/long.png"  />&nbsp&nbsp 3Future<span>.com</span>|前程锦绣&nbsp&nbsp
 <!---->
 <img id="img1" src="http://www.longge.cc/long.png"  />
</div>


        <div id="nav">
                <ul>
                        <li><a href="#" />首页</a></li>
                        <li><a href="#" />时光记忆</a></li>
                        <li><a href="#" />前行印迹</a></li>
                        <li><a href="#" />关于我</a></li>
                </ul>   
        </div>
  <img style="border-top:10px solid #d2ecfa;border-bottom:10px solid #d2ecfa;
    width:75vw;" src="./1.jpg"/>

 </body>
</html>
  • 写回答

2条回答 默认 最新

  • 正南木子ljh 2019-05-21 15:50
    关注

    其实函数没有什么问题 估计是你换成后台面这个图的id，漏了几个地方吧
    图片说明
    下面是我修改的，不知道有没有符合你的意思，上面没有使用for循环，你自己可以优化一下

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

            // 设置定时器
            function rotate () {
                InterVal = setInterval(function () {
                    var img = document.getElementsByClassName('img')
                    for(var i=0;i<img.length;i++){
                        rotateVal += 1
                    // 设置旋转属性(顺时针)
                    img[i].style.transform = 'rotate(' + rotateVal + 'deg)'
                    // 设置旋转属性(逆时针)
                    //img.style.transform = 'rotate(-' + rotateVal + 'deg)'
                    // 设置旋转时的动画  匀速0.1s
                    img[i].style.transition = '0.1s linear'
                    }

                }, 100)
            }
        </script>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 (标签-STM32|关键词-智能小车)
  • ¥20 关于#stm32#的问题，请各位专家解答！
  • ¥15 (标签-python)
  • ¥15 第一个已完成，求第二个做法
  • ¥20 搭建awx,试了很多版本都有错
  • ¥15 java corba的客户端该如何指定使用本地某个固定IP去连接服务端？
  • ¥15 activiti工作流问题，求解答
  • ¥15 有人写过RPA后台管理系统么？
  • ¥15 Bioage计算生物学年龄
  • ¥20 如何将FPGA Alveo U50恢复原来出厂设置哇？