id="aa"
style="width:130pxheight:50px"
>
</div>
<script>
function
scroll(p){
var
d
=
document,w
=
window,o
=
d.getElementById(p.id),ie6
=
/msie
6/i.test(navigator.userAgent)
if(o){
o.style.cssText
+="position:"+(p.f&&!ie6?'fixed':'absolute')+""+(p.r?'left':"right")+":0"+(p.t!=undefined?'top:'+p.t+'px':'bottom:0')
if(!p.f||ie6){
-function(){
var
t
=
500,st
=
d.documentElement.scrollTop||d.body.scrollTop,c
c
=
st
-
o.offsetTop
+
(p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight)//如果你是html
4.01请改成d.body,这里不处理以减少代码
c!=0&&(o.style.top
=
o.offsetTop
+
Math.ceil(Math.abs(c)/10)*(c<0?-1:1)
+
'px',t=10)
setTimeout(arguments.callee,t)
}()
}
}
}
scroll({
id:'aa'
})
</script>
svg路径画圆的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。rx，ry: 是椭圆的两个半轴的长度。
x-axis-rotation: 是椭圆相对于坐标系的旋转角度，角度数而非弧度数。
large-arc-flag: 是标记绘制大弧(1)还是小弧(0)部分。
sweep-flag: 是标记向顺时针(1)还是逆时针(0)方向绘制。
x，y: 是圆弧终点的坐标。
已知两点和半径求弧路径。
已知圆上两点和半径求弧长。
已知圆上的y轴半径和圆心求相交的x轴坐标。
已知圆上的x轴半径和圆心求y轴坐标。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>圆弧背景的导航菜单</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<style type="text/css">
*{margin:0pxpadding:0pxfont-size:12px}
.div_menu{ position:absoluteleft:100pxtop:100px}
.ul_menu{list-style:none}
.ul_menu li{float:leftmargin-left:1pxborder:1px solid #33CCCCdisplay:blockpadding:5px 3pxbackground:url(images/menu_bg.gif) repeat-x 0px -80pxpadding:2px 12px}
.ul_menu li a{height:40pxwidth:autocolor:#fffffffont-size:20pxfont-weight:600text-decoration:none}
</style>
<script type="text/javascript">
var isIE = (document.all)?true:false
var $ID = function(id){
return "string"==typeof id?document.getElementById(id):id
}
var Class = {
create:function(){
return function(){
this.initilize.apply(this,arguments)
}
}
}
var Extend = function(destination, source){
for(var property in source){
destination[property] = source[property]
}
}
var Bind = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2)
return function(){
return fun.apply(object,args)
}
}
var BindAsEventListener = function(object,fun){
var args = Array.prototype.slice.call(arguments).slice(2)
return function(event){
return fun.apply(object,[event||window.event].concat(args))
}
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false)
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler)
} else {
oTarget["on" + sEventType] = fnHandler
}
}
function removeEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.removeEventListener) {
oTarget.removeEventListener(sEventType, fnHandler, false)
} else if (oTarget.detachEvent) {
oTarget.detachEvent("on" + sEventType, fnHandler)
} else {
oTarget["on" + sEventType] = null
}
}
</script>
<script type="text/javascript">
var MyMenu = Class.create()
MyMenu.prototype = {
initilize:function(ul){
this.lis = ul.getElementsByTagName("li")
for(var i=0i<this.lis.lengthi++){
new BgChange(this.lis[i])
}
}
}
var BgChange = Class.create()
BgChange.prototype = {
initilize:function(li){
this.li = li
this._fnMouseOver = Bind(this,this.MouseOver)
this._fnMouseOut = Bind(this,this.MouseOut)
addEventHandler(this.li,"mouseover",this._fnMouseOver)
addEventHandler(this.li,"mouseout",this._fnMouseOut)
this.timer = null
this.i = -80
},
MouseOver:function(){
this.Stop()
this.i+=2
if(this.i>=0){
window.clearTimeout(this.timer)
this.i = 0
}else{
this.ShowBg()
this.timer = window.setTimeout(this._fnMouseOver,10)
}
},
MouseOut:function(){
this.Stop()
this.i-=2
if(this.i<=-80){
window.clearTimeout(this.timer)
this.i = -80
}else{
this.ShowBg()
this.timer = window.setTimeout(this._fnMouseOut,10)
}
},
ShowBg:function(){
this.li.style.backgroundPosition = "0px " + this.i + "px"
},
Stop:function(){
if(this.timer){
window.clearTimeout(this.timer)
}
}
}
onload = function(){
new MyMenu($ID("ul_menu"))
}
</script>
</head>
<body>
<div class="div_menu">
<ul class="ul_menu" id="ul_menu">
<li><a href="#">欢迎光临</a></li>
<li><a href="#">最新更新</a></li>
<li><a href="#">下载排行</a></li>
<li><a href="#">网页特效</a></li>
<li><a href="#">广告联系</a></li>
</ul>
</div>
</body>
</html>
