功能强大的旋转导航文字圈
<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||innerWidththis.y = document.getElementsByTagName('html').item(0).clientHeight||document.getElementsByTagName('html').item(0).offsetHeight||document.body.offsetHeight||innerHeightthis.x2 = parseInt(this.x/2)||0this.y2 = parseInt(this.y/2)||0this.sx = document.body.scrollWidth||0this.sy = document.body.scrollHeight||0}var pgvar pi = 3.1415function spinMenu(cls,rad,eSpd,rSpd,dir,x,y,noCt,runEx){pg = new getPageSize()this.cls = clsthis.rad = radthis.eSpd = eSpdthis.rSpd = rSpdthis.dir = dir ? 1 : -1this.x = x<0 ? pg.x2 : xthis.y = y<0 ? pg.y2 : ythis.runEx = runEx||0this.noCt = noCt||0this.r = 0 // radius fluxthis.ex = 0 // expand timeoutthis.ct = 0 // contract timeoutthis.rt = 1 // rotate timeoutthis.vis = 0 // visibilitythis.rNum = 0 // rotational fluxthis.rSpd2 = 0 // rSpd holderthis.exDone = 0 // expand complete?this.ctDone = 1 // contract complete?this.toFig = 0this.atX = 0this.atY = 0this.url = 0this.target = 0eval(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.elfor(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.dirif(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=0if(!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.eSpdif(this.rSpd2==0) this.rSpd2 = this.rSpdthis.rSpd = this.eSpd*3this.rotate()this.place()this.ex = setTimeout(this.obj+'.expand()',10)}else{this.ex = 0this.rSpd = this.rSpd2this.rSpd2 = 0this.ctDone = 0this.exDone = 1this.rotate()}}}spinMenu.prototype.contract = function(){if(this.ctDone!=1&&!this.noCt){this.exDone = 0if(this.ex!=0){clearTimeout(this.ex)this.ex = 0}if(this.r>0){this.r -= this.eSpdif(this.rSpd2==0) this.rSpd2 = this.rSpdthis.rSpd = this.eSpdthis.rotate()this.place()this.ct = setTimeout(this.obj+'.contract()',10)}else{this.rSpd = this.rSpd2this.rSpd2 = 0this.rNum = 0this.stop()this.hide()this.exDone = 0this.ctDone = 1this.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 = urlthis.target = target}spinMenu.prototype.goURL = function(){if(this.url){if(!this.target)if(document.getElementsByTagName('base').length) this.target = document.getElementsByTagName('base').item(0).targetif(this.target){if(this.target=='_blank') open(this.url)else if(this.target=='_parent') parent.location = this.urlelse if(this.target=='_top') top.location = this.urlelse 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.urlthis.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.butong.net">网页特效库</a></div> <div class="spin"><a href="http://www.butong.net/background/index.htm">背景特效</a></div> <div class="spin"><a href="http://www.butong.net/moban/index.htm">整站模板</a></div> <div class="spin"><a href="http://www.butong.net/navigation/index.htm">导航特效</a></div> <div class="spin"><a href="http://www.butong.net/time/index.htm">时间特效</a></div> <div class="spin"><a href="http://www.butong.net/img/index.htm">图象特效</a></div> <div class="spin"><a href="http://www.butong.net/text/index.htm">文本特效</a></div> </body>?