<! 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> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Style type = 'text/css '> Body {margin: 0px; padding: 0px; font-size: 12px ;} Ul, li, ol {margin: 0px; padding: 0px; list-style: none ;} A {text-decoration: none ;} Img {border: 0px ;}
. P9CHead {width: 100%; height: 100px; background: # 3c658e; border-bottom: 1px solid #315880 ;} . P9CHContent,. P9CSContent {width: 998px; height: 100%; margin: 0 auto ;} . P9CCLogo {width: 300px; height: 100%; overflow: hidden; float: left ;} . P9CCLogo a {float: left; position: relative; top: 22px ;} . P9CCLogo a: hover {opacity: 0.8 ;}
. P9CCMenu {float: right; height: 100% ;} . P9CCMNav,. P9CCMBg {width: 120px; height: 100%; float: left; margin-left: 1px; text-align: center; position: relative ;} . P9CCMBg {background: #274c71; left: 120px ;} . P9CCMNav a,. P9CCMNav em {position: absolute; display: block; width: 100%; float: left; left: 0px; top: 40px; color: white ;} . P9CCMNav a {font-family:; display: none; font-size: 15px ;} . P9CCMNav em {font-style: normal; font-size: 12px; font-family: Arial ;} . P9CSubNav {background: # f19900; width: 100%; height: 40px; line-height: 40px; border-bottom: 1px solid # c67e00; overflow: hidden ;} . P9CSContent {position: relative; height: 100%; overflow: hidden ;} . P9CCNav {width: 100%; height: 100%; text-align: right; position: absolute; top: 0px ;} . P9CCNav a {color: black; margin-left: 30px; font-size: 14px ;} </Style> </Head> <Body> <Div class = 'p9iner iner '> <Div class = 'p9chead'> <Div class = 'p9chcontent'> <Div class = 'p9cclogo '> <a href =' # 'alt = ''> </a> </div> <Ul class = 'p9ccmenu '> <Li class = 'p9ccmbg '> </li> <Li class = 'p9ccmnav'> <A href = 'HTTP: // www. bKjia. c0m' title = ''> homepage </a> <Em> Shouye </em> </Li> <Li class = 'p9ccmnav'> <A href = '# 'title = ''> about us </a> <Em> Guanyu Women </em> </Li> <Li class = 'p9ccmnav'> <A href = '# 'title = ''> latest news </a> <Em> Zuixin Dongtai </em> </Li> <Li class = 'p9ccmnav'> <A href = '# 'title = ''> Contact Us </a> <Em> Lianxi Women </em> </Li> </Ul> </Div> </Div> <Div class = 'p9csubnav'> <Ul class = 'p9cscontent'> <Li class = 'p9ccnav'> <A href = '# 'title = ''> Topic 1 </a> <A href = '# 'title = ''> column a </a> <A href = '# 'title = ''> column a </a> </Li> <Li class = 'p9ccnav'> <A href = '# 'title = ''> Topic 2 </a> <A href = '# 'title = ''> Column B </a> </Li> <Li class = 'p9ccnav'> <A href = '# 'title = ''> Topic 3 </a> <A href = '# 'title = ''> column c </a> <A href = '# 'title = ''> column c </a> <A href = '# 'title = ''> column c </a> </Li> <Li class = 'p9ccnav'> <A href = '# 'title = ''> Topic 4 </a> <A href = '# 'title = ''> Topic d </a> <A href = '# 'title = ''> Topic d </a> <A href = '# 'title = ''> Topic d </a> <A href = '# 'title = ''> Topic d </a> </Li> </Ul> </Div> </Div> <Script type = "text/javascript" src = "./jquery-1.7.2.js"> </script> <Script type = "text/javascript"> JQuery. fn. extend ({ P9: function (){ Var a = $ ('. p9ccnav '), B = $ ('. p9ccmnav '), C = $ ('. P9CCMBg '), P=parseint( B .find('a'hangzhou.css ('top'), 10 ); N = 0, t = 0, v = 0, m = 500; // Hook button event B. mouseenter (function (){ T = $ (this). index ()-1; // Initialization B .find('a'0000.stop().hide().css ({opacity: 1, top: p }); B .find('em'0000.stop().show().css ({opacity: 1, top: p }); // Move the background C. stop (true). animate ({left: (t + 1) * B. width ()}, m ); // Move content Detail (this%.find('em'%.css ({top: p, opacity: 1}). stop (true). animate ({top: p-20, opacity: 0}, m ); Certificate (this).find('a'%.show(%.css ({top: p + 10, opacity: 0}). stop (true). animate ({top: p, opacity: 1}, m ); // Subtopic A.css ({top: 0, opacity: 0 }); T> n? P9a (-30): p9a (30 ); N = t; }). Eq (0). mouseenter (); // Subtopic Animation Function p9a (c ){ A.eq(n).css ({top: 0, opacity: 1}). stop (true). animate ({top: c, opacity: 0}, m ); A.eq(t).css ({top:-(c), opacity: 0}). stop (true). animate ({top: 0, opacity: 1}, m ); } } }); $ (Window). p9 ();
</Script> </Body> </Html> |