javascript文字旋转效果

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;
}

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.r0)
{
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
}
}

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

[align=right]展开 | 隐藏 | 停止 | 旋转 | 改变旋转方向[/align]
网页特效库
背景特效
整站模板
导航特效
时间特效
图象特效
文本特效

代码：

<html>

<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.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>

</html>