<! 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"/> <Title> tab dynamically replaces the banner image path </title> <Script src = "js/jquery. min. js" type = "text/javascript"> </script> <Script type = "text/javascript"> $ (Document). ready (function (){ HoverFn ($ ("ul li"), "hover_css", $ ("p img"), "big"); // call a function /* Specifies the path where the mouse slides over and replaces the image. Function 2012.8.24 Author zoowar Parameter description Object of the current trigger event of obj Class Name of the currently selected hc Element Content: select the image with the path to be replaced The url is the image path. */ Function hoverFn (obj, hc, content, url ){ Obj. hover (function (){ Var h_css = hc; $ (This). addClass (h_css). siblings (). removeClass (h_css ); Var imgUrl = $ (this). attr (url ); Content. attr ("src", imgUrl ); }); } }) </Script> <Style type = "text/css"> Div { Width: 1024px; height: 768px; margin: 0 auto; } Ul { Width: 1024px; height: 40px; margin: 0; padding: 0; } Ul li { Width: 254px; line-height: 40px; Border-bottom: solid 2px # FB066F; text-align: center; List-style-type: none; float: left; margin-right: 2px; Background: # fff; } Ul li. hover_css { Border-bottom: solid 2px # 06F; background: # f0f0f0; } P { Margin: 0; padding: 0; text-align: center; padding-top: 20px; } </Style> </Head> <Body> <Div> <Ul> <Li class = "hover_css" big = "images/wall_s1.jpg"> landscape </li> <Li big = "images/wall_s2.jpg"> beauty </li> <Li big = "images/wall_s3.jpg"> Shuai Pan </li> <Li big = "images/wall_s4.jpg"> spoof </li> </Ul> <P> </P> </Div> </Body> </Html> |