Jquery中文网 > 脚本编程 > javascript > 正文简洁实用的旋转展示效果

简洁实用的旋转展示效果

发布时间：2017-06-20 编辑：www.jquerycn.cn

jquery中文网为您提供简洁实用的旋转展示效果等资源，欢迎您收藏本站，我们将为您提供最新的简洁实用的旋转展示效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>简洁实用的旋转展示效果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #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 language="javascript"> var len; var showerObj; var listObj; var showerWidth=800; var showerHeight=400; var r; var cR=0; var ccR=0; var timer=0; window.onload=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.onclick=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

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery Extremes
纯CSS3图标旋转效果代码
 ffmpeg截取视频指定帧为图片，获取rotation信息并旋转
 简洁实用的旋转展示效果
 jQuery示例收集
 jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
H5 C3实现旋转木马相册
 Illustrator让一个图形沿着某一点或顶点旋转复制教程
 jQuery 内容滑动插件 Basic jQuery Slider
分享几个超级震憾的图片特效

上一篇：兼容IE与Firefox div层拖动实现代码下一篇：js div 弹出层城市切换代码

[关闭]

简洁实用的旋转展示效果

最近更新

浏览排行