007

说明：	一个圆形的旋转导航文字圈，可以改变旋转方向，也可以隐藏导航，
状态:

代码：

<body> <style type="text/css"> BODY { background : #efefef; font : 12px Verdana; } A { color : #e70 } A:hover { text-decoration : none } .spin { position : absolute; visibility : hidden; z-index : auto; } .spin A { font : 12px Verdana; text-decoration : none; } .spin A:hover { text-decoration : underline overline; } </style> <script language="JavaScript1.2"> function getPageSize() { this.x = document.getElementsByTagName('html').item(0).clientWidth||document.getElementsByTagName('html').item(0).offsetWidth||document.body.offsetWidth||innerWidth this.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeight this.x2 = parseInt(this.x/2)||0 this.y2 = parseInt(this.y/2)||0 this.sx = document.body.scrollWidth||0 this.sy = document.body.scrollHeight||0 } var pg var pi = 3.1415 function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx) { pg = new getPageSize() this.cls = cls this.rad = rad this.eSpd = eSpd this.rSpd = rSpd this.dir = dir ? 1 : -1 this.x = x<0 ? pg.x2 : x this.y = y<0 ? pg.y2 : y this.runEx = runEx||0 this.noCt = noCt||0 this.r = 0 // radius flux this.ex = 0 // expand timeout this.ct = 0 // contract timeout this.rt = 1 // rotate timeout this.vis = 0 // visibility this.rNum = 0 // rotational flux this.rSpd2 = 0 // rSpd holder this.exDone = 0 // expand complete? this.ctDone = 1 // contract complete? this.toFig = 0 this.atX = 0 this.atY = 0 this.url = 0 this.target = 0 eval(this.obj + "=this") this.items = new Array() this.el = document.getElementsByTagName('div') for(i=0;(this.el.item(i));i++) { if(this.el.item(i).className==this.cls) { this.el.item(i).onmouseover = new Function(this.obj+'.stop()') this.el.item(i).onmouseout = new Function(this.obj+'.rotate()') this.el.item(i).onclick = new Function(this.obj+'.contract()') this.items[this.items.length] = this.el.item(i) } } delete this.el for(i=0;(this.items[i]);i++) { if(!this.items[i].childNodes.item(0).nodeValue) { this.items[i].childNodes.item(0).onmouseover = new Function('status=this.href;return true') this.items[i].childNodes.item(0).onmouseout = new Function('status=\'\';return true') this.items[i].childNodes.item(0).onclick = new Function(this.obj+'.setURL(this.href,this.target);return false') this.items[i].childNodes.item(0).onfocus = new Function('this.blur()') } } return this } spinMenu.prototype.init = function() { this.hide() this.place() this.expand() } spinMenu.prototype.rotate = function() { if(this.rSpd) { this.rNum += pi/(1000/this.rSpd)*this.dir if(this.exDone) { this.place() clearTimeout(this.rt) this.rt = setTimeout(this.obj+'.rotate()',20) } } } spinMenu.prototype.stop = function() { clearTimeout(this.rt) this.rt = 0 } spinMenu.prototype.expand = function() { if(this.exDone!=1) { this.ctDone=0 if(!this.vis) this.show() if(this.runEx) eval(this.runEx) if(this.ct!=0) { clearTimeout(this.ct) this.ct = 0 } if(this.r<this.rad) { this.r += this.eSpd if(this.rSpd2==0) this.rSpd2 = this.rSpd this.rSpd = this.eSpd*3 this.rotate() this.place() this.ex = setTimeout(this.obj+'.expand()',10) } else { this.ex = 0 this.rSpd = this.rSpd2 this.rSpd2 = 0 this.ctDone = 0 this.exDone = 1 this.rotate() } } } spinMenu.prototype.contract = function() { if(this.ctDone!=1&&!this.noCt) { this.exDone = 0 if(this.ex!=0) { clearTimeout(this.ex) this.ex = 0 } if(this.r>0) { this.r -= this.eSpd if(this.rSpd2==0) this.rSpd2 = this.rSpd this.rSpd = this.eSpd this.rotate() this.place() this.ct = setTimeout(this.obj+'.contract()',10) } else { this.rSpd = this.rSpd2 this.rSpd2 = 0 this.rNum = 0 this.stop() this.hide() this.exDone = 0 this.ctDone = 1 this.goURL() } } else this.goURL() } spinMenu.prototype.place = function() { for(i=0;(this.items[i]);i++) { this.atPt(i) this.items[i].style.left = this.atX-(this.items[i].offsetWidth/2)+'px' this.items[i].style.top = this.atY-(this.items[i].offsetHeight/2)+'px' } } spinMenu.prototype.atPt = function(pt) { this.toFig = pi/(this.items.length/2)*(pt+this.rNum) this.atX = parseInt(Math.cos(this.toFig)*this.r+this.x) this.atY = parseInt(Math.sin(this.toFig)*this.r+this.y) } spinMenu.prototype.show = function() { for(i=0;(this.items[i]);i++) { this.items[i].style.display = 'block' this.items[i].style.visibility = 'visible' this.vis = 1 } } spinMenu.prototype.hide = function() { for(i=0;(this.items[i]);i++) { this.items[i].style.visibility = 'hidden' this.items[i].style.display = 'none' this.vis = 0 } } spinMenu.prototype.changeDir = function() { this.dir = this.dir==1 ? -1 : 1 } spinMenu.prototype.setURL = function(url,target) { this.url = url this.target = target } spinMenu.prototype.goURL = function() { if(this.url) { if(!this.target) if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).target if(this.target) { if(this.target=='_blank') open(this.url) else if(this.target=='_parent') parent.location = this.url else if(this.target=='_top') top.location = this.url else if(this.target.indexOf('_')<0) { if(eval('parent.'+this.target)) eval('parent.'+this.target+'.document.location=this.url') else if(eval('top.'+this.target)) eval('top.'+this.target+'.document.location=this.url') else open(this.url,this.target) } else location = this.url } else location = this.url this.url = 0 } } </script> <script language="JavaScript1.2" type="text/javascript"> function centerIt() { pg = new getPageSize() menu.x = pg.x2-10 menu.y = pg.y2 } function initSpinMenu() { menu = new spinMenu( 'spin', // className 120, // radius 12, // expand/contract speed 3, // rotational speed 1, // direction (cw=1,ccw=0) -1, // origin x -1, // origin y 0, // stay expanded? 0 // run before expand ) menu.init() } onload=initSpinMenu onresize=centerIt </script> <base target="newWin"> <div align="right"><a href="javascript:menu.expand()" target="_self">展开</a> | <a href="javascript:menu.contract()" target="_self">隐藏</a> | <a href="javascript:menu.stop()" target="_self">停止</a> | <a href="javascript:menu.rotate()" target="_self">旋转</a> | <a href="javascript:menu.changeDir()" target="_self">改变旋转方向</a></div> <div class="spin"><a href="http://www.cn0713.net">浠水在线</a></div> <div class="spin"><a href="http://001.my1848.com/zwr/2">清风小屋</a></div> <div class="spin"><a href="http://www.sina.com.cn">新浪网</a></div> <div class="spin"><a href="http://www.5460.net">中国同学录</a></div> <div class="spin"><a href="http://www.the9.com">第九城市</a></div> <div class="spin"><a href="http://www.cctv.com">央视国际</a></div> <div class="spin"><a href="http://www.163.com">网易</a></div>