旋转菜单代码实现

最新推荐文章于 2023-02-08 08:00:00 发布

web控

最新推荐文章于 2023-02-08 08:00:00 发布

阅读量390

点赞数

分类专栏： HTML5

HTML5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

 
 如图所示，菜单的子模块沿着虚线顺时针旋转（虚线只是轨道示意用来理解的，实际的页面上没有虚线）；
 
 当鼠标进入菜单时，停止旋转，鼠标移除出，继续旋转；
 
 请问这种旋转菜单的如何实现？？
 能有代码最好！谢谢了！
 
 <!doctype html> 
 
  <html lang= 
  "en" 
  > 
 
  <head> 
 
  <meta charset= 
  "UTF-8"  
  /> 
 
  <meta http-equiv= 
  "X-UA-Compatible"  
  content= 
  "IE=edge,chrome=1"  
  /> 
 
  <title> 页面名称 </title> 
 
  <style type= 
  "text/css" 
  > 
 
  #box { 
 
  position: relative; 
 
  width: 500px; 
 
  height: 500px; 
 
  background:  
  #CCC; 
 
  } 
 
  #box div { 
 
  position: absolute; 
 
  border: 1px solid  
  #000; 
 
  display: inline; 
 
  background:  
  #FFF; 
 
  padding: 10px; 
 
  } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div id= 
  "box" 
  > 
 
  <div>aaaaa</div> 
 
  <div>bb</div> 
 
  <div>ccccccc</div> 
 
  <div>ddd</div> 
 
  <div>eeeee</div> 
 
  </div> 
 
  <script type= 
  "text/javascript" 
  > 
 
  ( 
  function  
  () { 
 
  var  
  box = document.getElementById( 
  "box" 
  ); 
 
  var  
  div = box.getElementsByTagName( 
  "div" 
  ); 
 
  var  
  cx = box.offsetWidth >> 1; 
 
  var  
  cy = box.offsetHeight >> 1; 
 
  var  
  len = div.length; 
 
  var  
  radius = 200; 
 
  var  
  loop = 0; 
 
  function  
  draw() { 
 
  loop += 0.02; 
 
  for  
  ( 
  var  
  i = 0; i < len; i++) { 
 
  div[i].style.left = (Math.sin((Math.PI*2)*(i/len)+loop)*radius) + cx - (div[i].offsetWidth>>1) +  
  "px" 
  ; 
 
  div[i].style.top = (-Math.cos((Math.PI*2)*(i/len)+loop)*radius) + cy - (div[i].offsetHeight>>1) +  
  "px" 
  ; 
 
  } 
 
  } 
 
  var  
  timer = setInterval(draw, 50); 
 
  for  
  ( 
  var  
  i = 0; i < len; i++) { 
 
  div[i].onmouseover =  
  function  
  () { 
 
  clearInterval(timer); 
 
  } 
 
  div[i].onmouseout =  
  function  
  () { 
 
  timer = setInterval(draw, 50); 
 
  } 
 
  } 
 
  })(); 
 
  </script> 
 
  </body> 
 
  </html>