微学网

热门关键词:   as  thinkphp  ecshop  xxx  商务通  php分页
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

纯js实现多图平面绕圆心旋转无需插件

发布时间:2020-04-28 来源:未知 点击:
多个图片绕圆心转动,代码如下:
 <style type="text/css">
        #div1 {
             position: relative;
             height: 800px;
             
background:url(/static/images/yuan.png) center center no-repeat;
         }
 
         #div1 img {
             position: absolute;
         }
     </style>
                                        <div id="div1">
     <img src="http://www.weixuecn.cn/uploads/allimg/200305/1_03051Z5411A6.jpg" width="150"/>
     <img src="http://www.weixuecn.cn/uploads/allimg/200305/1_03051Z5411A6.jpg" width="150"/>
     <img src="http://www.weixuecn.cn/uploads/allimg/200305/1_03051Z5411A6.jpg" width="150"/>
     <img src="hhttp://www.weixuecn.cn/uploads/allimg/200305/1_03051Z5411A6.jpg" width="150"/>
 
 </div>
 <script type="text/javascript">
     var centerx = 600; //圆心X
     var centery = 250; //圆心Y
     var r = 230; //半径
     var oimages = document.getElementById("div1").getElementsByTagName("IMG"); //图片集合
     var cnt = oimages.length; //图片数
     var da = 360 / cnt; //图片间隔角度
     var a0 = 0; //已旋转角度
     var timer;
     for (var i = 0; i < cnt; i++) {
         oimages[i].onmouseover = stop;
         oimages[i].onmouseout = start;
     }
     
     function posimgs() {
        for (var i = 0; i < cnt; i++) {
            oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
             oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
         }
     }
 
     // posimgs();
     function start() {
         timer = window.setInterval("posimgs();a0++;", 100);
     }
 
     function stop() {
         window.clearInterval(timer);
     }
     start();
 </script>

这就是微学网-程序员之家为你提供的"纯js实现多图平面绕圆心旋转无需插件"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/14033.html
网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 服务器 | 微信开发 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版