使用JavaScript控制圆弧背景的导航菜单_网页代码站(www.webdm.cn)

1 <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
2 < html xmlns ="http://www.w3.org/1999/xhtml" >
3 < head >
4 < title > 使用JavaScript控制圆弧背景的导航菜单_网页代码站(www.webdm.cn) </ title >
5 < style type ="text/css" >
6 * { margin : 0px ; padding : 0px ; font-size : 12px ; }
7 .div_menu { position : absolute ; left : 100px ; top : 100px ; }
8 .ul_menu { list-style : none ; }
9 .ul_menu li { float : left ; margin-left : 1px ; border : 1px solid #33CCCC ; display : block ; padding : 5px 3px ; background : url
10
11 (http://www.webdm.cn/images/20090910/menu_bg.gif) repeat-x 0px -80px ; padding : 2px 12px ; }
12 .ul_menu li a { height : 40px ; width : auto ; color : #ffffff ; font-size : 20px ; font-weight : 600 ; text-decoration : none ; }
13 </ style >
14 < script type ="text/javascript" >
15 var isIE = (document.all) ? true : false ;
16 var $ID = function (id){
17 return " string " == typeof id ? document.getElementById(id):id;
18 }
19 var Class = {
20 create: function (){
21 return function (){
22 this .initilize.apply( this ,arguments);
23 }
24 }
25 }
26 var Extend = function (destination, source){
27 for ( var property in source){
28 destination[property] = source[property];
29 }
30 }
31 var Bind = function (object,fun){
32 var args = Array.prototype.slice.call(arguments).slice( 2 );
33 return function (){
34 return fun.apply(object,args);
35 }
36 }
37 var BindAsEventListener = function (object,fun){
38 var args = Array.prototype.slice.call(arguments).slice( 2 );
39 return function (event){
40 return fun.apply(object,[event || window.event].concat(args));
41 }
42 }
43 function addEventHandler(oTarget, sEventType, fnHandler) {
44 if (oTarget.addEventListener) {
45 oTarget.addEventListener(sEventType, fnHandler, false );
46 } else if (oTarget.attachEvent) {
47 oTarget.attachEvent( " on " + sEventType, fnHandler);
48 } else {
49 oTarget[ " on " + sEventType] = fnHandler;
50 }
51 };
52 function removeEventHandler(oTarget, sEventType, fnHandler) {
53 if (oTarget.removeEventListener) {
54 oTarget.removeEventListener(sEventType, fnHandler, false );
55 } else if (oTarget.detachEvent) {
56 oTarget.detachEvent( " on " + sEventType, fnHandler);
57 } else {
58 oTarget[ " on " + sEventType] = null ;
59 }
60 };
61 </ script >
62 < script type ="text/javascript" >
63 var MyMenu = Class.create();
64 MyMenu.prototype = {
65 initilize: function (ul){
66 this .lis = ul.getElementsByTagName( " li " );
67 for ( var i = 0 ;i < this .lis.length;i ++ ){
68 new BgChange( this .lis[i]);
69 }
70 }
71 }
72 var BgChange = Class.create();
73 BgChange.prototype = {
74 initilize: function (li){
75 this .li = li;
76 this ._fnMouseOver = Bind( this , this .MouseOver);
77 this ._fnMouseOut = Bind( this , this .MouseOut);
78 addEventHandler( this .li, " mouseover " , this ._fnMouseOver);
79 addEventHandler( this .li, " mouseout " , this ._fnMouseOut);
80 this .timer = null ;
81 this .i = - 80 ;
82 },
83 MouseOver: function (){
84 this .Stop();
85 this .i += 2 ;
86 if ( this .i >= 0 ){
87 window.clearTimeout( this .timer);
88 this .i = 0 ;
89 } else {
90 this .ShowBg();
91 this .timer = window.setTimeout( this ._fnMouseOver, 10 );
92 }
93 },
94 MouseOut: function (){
95 this .Stop();
96 this .i -= 2 ;
97 if ( this .i <=- 80 ){
98 window.clearTimeout( this .timer);
99 this .i = - 80 ;
100 } else {
101 this .ShowBg();
102 this .timer = window.setTimeout( this ._fnMouseOut, 10 );
103 }
104 },
105 ShowBg: function (){
106 this .li.style.backgroundPosition = " 0px " + this .i + " px " ;
107 },
108 Stop: function (){
109 if ( this .timer){
110 window.clearTimeout( this .timer);
111 }
112 }
113 }
114 onload = function (){
115 new MyMenu($ID( " ul_menu " ));
116 }
117 </ script >
118 </ head >
119 < body >
120 < div class ="div_menu" >
121 < ul class ="ul_menu" id ="ul_menu" >
122 < li >< a href ="http://www.webdm.cn/" > 网页代码站 </ a ></ li >
123 < li >< a href ="#" > 最新更新 </ a ></ li >
124 < li >< a href ="http://www.webdm.cn/" > 下载排行 </ a ></ li >
125 < li >< a href ="#" > 网页特效 </ a ></ li >
126 < li >< a href ="http://www.webdm.cn/" > 广告联系 </ a ></ li >
127 </ ul >
128 </ div >
129 </ body >
130 </ html >
131 < br >
132 < a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/7eb3db31-494c-45fd-9469-0ac40938651d.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/03/1924750.html