特效介绍

jQuery动态背景的导航栏代码,导航栏在hover状态下,背景会像霓虹灯一样滚动和变色。
使用方法
1、JS代码:
02 | <script type= "text/javascript" > |
03 | $(document).ready( function (){ |
05 | $( '#menu li' ).each( function () { |
06 | width += $( this ).width()+1; |
08 | var padding = parseInt((($( '#menu' ).width() - width) / $( '#menu li a' ).length)/2); |
09 | var pixLeft = ($( '#menu' ).width() - width)-(padding*$( '#menu li a' ).length*2) |
10 | $( '#menu li a' ).each( function (index) { |
11 | if (index+1 != $( '#menu li a' ).length) { |
12 | $( this ).css( 'padding' , '0 ' +padding+ 'px' ); |
13 | $( this ).css( 'background-position' , '-' + $( this ).position().left + 'px 0' ); |
15 | padding = padding + (pixLeft/2); |
16 | $( this ).css( 'padding' , '0 ' +padding+ 'px' ); |
17 | $( this ).css( 'background-position' , '-' + $( this ).position().left + 'px 0' ); |
20 | $( '#menu li a' ).mouseover( function (){ |
21 | $( this ).stop().animate({ backgroundPosition: '-' + $( this ).position().left - 129 + 'px 0' }, 2000) |
23 | $( this ).stop().animate({ backgroundPosition: '-' + $( this ).position().left + 'px 0' }, 2000) |
28 | if (!document.defaultView || !document.defaultView.getComputedStyle){ |
29 | var oldCurCSS = jQuery.curCSS; |
30 | jQuery.curCSS = function (elem, name, force){ |
31 | if (name === 'background-position' ){ |
32 | name = 'backgroundPosition' ; |
34 | if (name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ |
35 | return oldCurCSS.apply( this , arguments); |
37 | var style = elem.style; |
38 | if ( !force && style && style[ name ] ){ |
41 | return oldCurCSS(elem, 'backgroundPositionX' , force) + ' ' + oldCurCSS(elem, 'backgroundPositionY' , force); |
44 | var oldAnim = $.fn.animate; |
45 | $.fn.animate = function (prop){ |
46 | if ( 'background-position' in prop){ |
47 | prop.backgroundPosition = prop[ 'background-position' ]; |
48 | delete prop[ 'background-position' ]; |
50 | if ( 'backgroundPosition' in prop){ |
51 | prop.backgroundPosition = '(' + prop.backgroundPosition; |
53 | return oldAnim.apply( this , arguments); |
55 | function toArray(strg){ |
56 | strg = strg.replace(/left|top/g, '0px' ); |
57 | strg = strg.replace(/right|bottom/g, '100%' ); |
58 | strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2" ); |
59 | var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); |
60 | return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; |
62 | $.fx.step. backgroundPosition = function (fx) { |
64 | var start = $.curCSS(fx.elem, 'backgroundPosition' ); |
69 | start = toArray(start); |
70 | fx.start = [start[0],start[2]]; |
72 | var end = toArray(fx.options.curAnim == undefined ? fx.end : fx.options.curAnim.backgroundPosition); |
73 | fx.end = [end[0],end[2]]; |
74 | fx.unit = [end[1],end[3]]; |
79 | nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; |
80 | nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; |
81 | fx.elem.style.backgroundPosition = nowPosX[0]+ ' ' +nowPosX[1]; |
2、CSS代码:
01 | <style type= "text/css" > |
09 | font : 62.8% Arial , Tahoma , Helvetica , sans-serif ; |
13 | h 1 , h 2 , h 3 , h 4 , h 5 , h 6 , form, fieldset, dl, ul { margin : 0 ; padding : 0 ;} |
14 | strong, b { font-weight : bold ;} |
15 | em, i { font-style : italic ;} |
21 | text-decoration : none ; |
24 | text-decoration : underline ; |
32 | top : 15px ; left : 240px ; |
41 | background : url ( 'menu_bg1.gif' ) no-repeat top left ; |
42 | border-top : 1px solid #000 ; |
43 | border-bottom : 1px solid #000 ; |
49 | border-left : 1px solid #000 ; |
55 | border-left : 1px solid #ccc ; |
56 | text-decoration : none ; |
57 | background : url ( 'menu_bg1.gif' ) no-repeat top left ; |
60 | background : url ( 'menu_bg_active.gif' ) no-repeat top left ; |
62 | #menu li:first-child { border : none ; } |
63 | #menu li:first-child a { border : none ; } |
3、HTML代码:
2 | < li >< a href = "#" title = "#" >网页模板</ a ></ li > |
3 | < li >< a href = "#" title = "#" >网页特效</ a ></ li > |
4 | < li >< a href = "#" title = "#" >教程文章</ a ></ li > |
5 | < li >< a href = "#" title = "#" >编程类库</ a ></ li > |
6 | < li >< a href = "#" title = "#" >网站模板</ a ></ li > |