<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ptml xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = gb2312 "/> <title> image player _ image rotation _ focus effect </title> <style type =" text/css "> # focus_m {position: relative; width: 420px; height: 384px; background: #133775 }. f_img_roll {width: 350px; height: 300px; position: relative ;}. f_img_roll img {position: absolute; left: 0; top: 0; width: 350px; height: 300px ;}. f_img_tree {position: absolute; width: 75px; height: 300px; right: 3px; top: 0 ;}. f_img_tree div {position: absolute; z-index: 201; top: 3px; right: 0; width: 75px; height: 47px; background: url (http://www.kuanghong.com/han/images/mask.gif) no-repeat ;}. f_img_tree ul {margin: 0; padding: 0; list-style: none; position: absolute; right: 0 ;}. f_img_tree li {width: 60px; height: 45px; border: 1px solid # 0066cc; margin-top: 3px ;}. f_img_tree img {width: 54px; height: 39px; border: 3px solid #000066; vertical-align: top ;}. f_con {color: # fff; height: 70px ;}. f_con. f_title {font-size: 14px; height: 30px; line-height: 30px; margin-top: 5px; font-weight: bold; text-align: center ;}. f_con. f_title a: link ,. f_con. f_title a: visited {color: # fff; text-decoration: none }. f_con. f_title a: hover {text-decoration: underline }. f_con. f_con {font-size: 12px; padding: 0 10px; height: 40px; line-height: 150% ;} </style> </pead> <body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]