JS圆

偏执的太偏执、 2022-07-11 08:15 192阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>图片旋转展示</title>  
<style>  
\#show\{position:relative;margin:20px auto;width:800px;border:1px solid \#999999;\}  
.item\{position:absolute;height:40px;width:60px;background:\#999999;border:1px solid \#eeeeee;cursor:pointer;\}  
</style>  
<script>  
var len;  
var showerObj;  
var listObj;  
var showerWidth=800;  
var showerHeight=400;  
var r;  
var cR=0;  
var ccR=0;  
var timer=0;  
window.οnlοad=function()\{  
showerObj=document.getElementById("show");  
listObj=showerObj.getElementsByTagName("div");  
len=listObj.length;  
r=Math.PI/180\*360/len;  
for(var i=0;i<len;i++)\{  
var item=listObj\[i\];  
item.style.top=showerHeight/2+Math.sin(r\*i)\*showerWidth/2-20+"px";  
item.style.left=showerWidth/2+Math.cos(r\*i)\*showerWidth/2-30+"px";  
item.rotate=(r\*i+2\*Math.PI)%(2\*Math.PI);  
item.οnclick=function()\{  
cR=Math.PI/2-this.rotate;  
timer || (timer=setInterval(rotate,10));  
\}  
\}  
var rX=showerObj.offsetLeft+showerWidth/2;  
var ry=showerObj.offsetTop+showerHeight/2;  
var rotate=function()\{  
ccR=(ccR+2\*Math.PI)%(2\*Math.PI);  
if(cR-ccR<0) cR=cR+2\*Math.PI;  
if(cR-ccR<Math.PI)\{  
ccR=ccR+(cR-ccR)/19;  
\}else\{  
ccR=ccR-(2\*Math.PI+ccR-cR)/19;  
\}  
if(Math.abs((cR+2\*Math.PI)%(2\*Math.PI)-(ccR+2\*Math.PI)%(2\*Math.PI))<Math.PI/720)\{  
ccR=cR;  
clearInterval(timer);  
timer=0;  
\}  
for(var i=0;i<len;i++)\{  
var item=listObj\[i\];  
var w,h;  
var sinR=Math.sin(r\*i+ccR);  
var cosR=Math.cos(r\*i+ccR);  
w=60+0.6\*60\*sinR;  
h=(40+0.6\*40\*sinR);  
item.style.cssText +=";width:"+w+"px;height:"+h+"px;top:"+parseInt(showerHeight/2+sinR\*showerWidth/2/3-w/2)+"px;left:"+parseInt(showerWidth/2+cosR\*showerWidth/2-h/2)+"px;z-index:"+parseInt(showerHeight/2+sinR\*showerWidth/2/3-w/2)+";";  
\}  
\}  
document.getElementById("l").οnclick=function()\{  
cR=(cR+r+2\*Math.PI)%(2\*Math.PI);  
timer || (timer=setInterval(rotate,10));  
\}  
document.getElementById("r").οnclick=function()\{  
cR=(cR-r+2\*Math.PI)%(2\*Math.PI);  
timer || (timer=setInterval(rotate,10));  
\}  
rotate();  
\}  
</script>  
</head>  
<body>  
<input id="l" type="button" value="顺时针旋转" >  
<input id="r" type="button" value="逆时针旋转" >  
<div id="show">  
<div class="item">1</div>  
<div class="item">2</div>  
<div class="item">3</div>  
<div class="item">4</div>  
<div class="item">5</div>  
<div class="item">6</div>  
<div class="item">7</div>  
<div class="item">8</div>  
<div class="item">9</div>  
<div class="item">0</div>  
<div class="item">a</div>  
<div class="item">b</div>  
<div class="item">1</div>  
<div class="item">2</div>  
<div class="item">3</div>  
</div>  
</body>  
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='\_blank'>http://www.veryhuo.com/</a></center>