JS+CSS打造的3D圆形,可控制左右旋转

　　一段JavaScript+CSS写的代码，实现一个3D圆形样式的JavaScript图片旋转展示代码，这里为了演示方便，将图片替换成了数字，预留出了图片的位置，这样速度快些，会HTML的朋友都知道用时候该怎么做。本图片旋转需要手动控制，每点击一下，图片旋转一次，可以使用在一些产品的网站上，展示自己的产品图片，点击图片进入相关介绍。当然也可用于其它方面。

　　下面随便烈火一下看看效果演示：

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

热点

JS+CSS打造的3D圆形,可控制左右旋转

由 dawei

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀

JS+CSS打造的3D圆形,可控制左右旋转

由 dawei

相关文章

COLMO以理享之光，照亮理享世界

美巢坊水固，兼顾质量与环保，硬核家装实力派

宗艺石材携手群核科技（酷家乐），开创设计家装一体化营销模式

您错过了

优化云客服平台的稳定性和响应速度

云客服具备强大的数据分析能力

云客服推动客户服务行业智能化升级

云客服系统提升企业响应速度的秘诀