微信扫一扫打赏支持

js如何实现多图平面绕圆心旋转？（问题转化思想）

js如何实现多图平面绕圆心旋转？（问题转化思想）

一、总结

1、先将元素设置为绝对定位，然后用函数动态改变元素的位置，最后将函数设置为每隔一段时间自动执行。

2、元素位置的改变可以看做求圆上两点距离的差值。（问题转化思想）

 

二、js如何实现多图平面选择？

1、效果图

 

2、代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 2         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6     <title>图片旋转</title>
 7     <style type="text/css">
 8         #div1 {
 9             position: relative;
10             height: 800px;
11             border: 1px solid red;
12         }
13 
14         #div1 img {
15             position: absolute;
16         }
17     </style>
18 </head>
19 <body>
20 <div id="div1">
21     <img src="http://www.jb51.net/images/logo.gif"/>
22     <img src="http://www.jb51.net/images/logo.gif"/>
23     <img src="http://www.jb51.net/images/logo.gif"/>
24     <img src="http://www.jb51.net/images/logo.gif"/>
25     <img src="http://www.jb51.net/images/logo.gif"/>
26     <img src="http://www.jb51.net/images/logo.gif"/>
27 </div>
28 <script type="text/javascript">
29     var centerx = 400; //圆心X
30     var centery = 300; //圆心Y
31     var r = 300; //半径
32     var oimages = document.getElementById("div1").getElementsByTagName("IMG"); //图片集合
33     var cnt = oimages.length; //图片数
34     var da = 360 / cnt; //图片间隔角度
35     var a0 = 0; //已旋转角度
36     var timer;
37     for (var i = 0; i < cnt; i++) {
38         oimages[i].onmouseover = stop;
39         oimages[i].onmouseout = start;
40     }
41 
42     function posimgs() {
43         for (var i = 0; i < cnt; i++) {
44             oimages[i].style.left = centerx + r * Math.cos((da * i + a0) / 180 * Math.PI) + "px";
45             oimages[i].style.top = centery + r * Math.sin((da * i + a0) / 180 * Math.PI) + "px";
46         }
47     }
48 
49     // posimgs();
50     function start() {
51         timer = window.setInterval("posimgs();a0++;", 100);
52     }
53 
54     function stop() {
55         window.clearInterval(timer);
56     }
57 
58     start();
59 </script>
60 </body>
61 </html>

 

三、测试题-简答题

1、position:absolute;中的absolute方式占用文本流位置么？

解答：absolute是绝对定位，不占文本流位置。

 

2、怎么实现一个标签element的绝对定位？

解答：父亲设置为relative相对定位，然后自己设置为绝对定位。

 

3、设置相对定位和设置绝对定位的关键词是什么？

解答：关键词是position。

 

4、如何获取到被getElements（比如说ByName）方式获取的元素集中的每一个？

解答：getElements方式获取的元素集中都元素都是标签element，所以可以先获取元素集的长度length，然后在通过 元素集[i] 的方式逐一遍历每个标签element。

 

5、如何实现元素的旋转？

解答：动态的改变元素的位置。

 

6、如何改变元素的位置？

解答：先取得标签element，然后设置style中的left（距左）和top（距上）边距即可。

 

7、如何实现图片动起来？

解答：让一个函数不停的改变元素的位置。

 

8、如何实现让一个函数不停的改变元素的位置？

解答：给函数设置自动执行。

 

9、如何给函数设置自动执行？

解答：window.setInterval(函数，时间间隔)。

 

10、setInterval是谁的方法？

解答：是window对象的儿子。

 

11、如何让旋转的动画停止下来？

解答：清除设置的自动执行。也就是清除interval，window的clearInterval方法，参数是interval对象。 window.clearInterval(timer);

 

12、timer = window.setInterval("posimgs();a0++;", 100); 通过上面代码简述某函数调用另一函数的实质是什么？

解答：其实就是普通的执行函数，既然可以执行函数，我自然可以执行语句。

 

13、如何让一个物体绕着一个圆运动，肯定通过数学函数不断的改变物体的位置，请简述这个数学函数，转化为其实也就是如何求一个圆中两点位置的差值。（问题转化思想）

解答：r * Math.cos((da * i + a0) / 180 * Math.PI)。 半径*角度的sin或者cos。

 

posted @ 2018-05-30 02:09  范仁义  阅读(2624)  评论(0)  编辑  收藏  举报