Images supported by multiple browsers supported by js are recommended by jb51 webmasters, such as ie and firefox.
Last Update:2018-12-08
Source: Internet
Author: User
Jb51 webmasters recommend using JavaScript to achieve multi-browser-supported image rotation display effects in ie, firefox and testing everything is normal, it is recommended that you use such compatible code in the future <Br/> <style type = "text/css"> body {margin: 0 auto; padding: 0; text-align: center }. box400 {margin: 0 auto; padding: 0; width: 400px} # f_menu {MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 20px} # f_menu A {DISPLAY: block; BACKGROUND: #393939; FLOAT: left; OVERFLOW: hidden; COLOR: # fff; LINE-HEIGHT: 20px; MARGIN-RIGHT: 1px; BORDER-BOTTOM: # fff 1px solid; HEIGHT: 20px; TEXT-ALIGN: center }# F_menu A: hover {BACKGROUND: # ff8500} # f_menu. on {BACKGROUND: # ff8500} # f_div {MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 400px; HEIGHT: 200px} # f_adDiv {OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 25px} # f_imgDiv {OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 200px} # f_img {BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid: DXImageTransform. microsoft. fade (Overlap = 1.00); BORDER-LEFT: 0px; BORDER-B OTTOM: 0px} # f_infoDiv {WIDTH: 100%; POSITION: relative; TOP:-14px} # f_buttonDiv {OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 14px; TEXT-ALIGN: left} # f_line {BACKGROUND: # fff; FILTER: progid: DXImageTransform. microsoft. alpha (startX = 0, startY = 0, finishX = 50, finishY = 100, style = 1, opacity = 0, finishOpacity = 100); MARGIN-LEFT: 270px; OVERFLOW: hidden; WIDTH: 130px; HEIGHT: 1px} # f_but TonDiv DIV {BACKGROUND: # fff; FLOAT: right; WIDTH: 1px; HEIGHT: 14px} # f_buttonDiv. bg {BACKGROUND: # fff; FILTER: Alpha (Opacity = 40); FLOAT: right; WIDTH: 14px; HEIGHT: 14px} # f_buttonDiv A {DISPLAY: block; FONT-SIZE: 10px; FLOAT: right; OVERFLOW: hidden; WIDTH: 14px; COLOR: # fff; PADDING-TOP: 0px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: absolute; HEIGHT: 14px; TEXT-ALIGN: center; TEXT-DECORATION: none }# f_buttonDiv A: link {COLOR: #000} # f_buttonDiv A: visited {COLOR: #000} # f_buttonDiv A: active {COLOR: #000} # f_buttonDiv A: hover {BACKGROUND: # ff840c; COLOR: # fff} # f_buttonDiv. on: link {BACKGROUND: # ff840c; COLOR: # fff} # f_buttonDiv. on: visited {BACKGROUND: # ff840c; COLOR: # fff} # f_buttonDiv. on: active {BACKGROUND: # ff840c; COLOR: # fff} # f_buttonDiv. on: h Over {BACKGROUND: # ff840c; COLOR: # fff} # f_buttonDiv. on: hover {BACKGROUND: # ff6600} # f_text {OVERFLOW: hidden; LINE-HEIGHT: 26px; HEIGHT: 26px; TEXT-ALIGN: center} # f_text A: link {COLOR: #000; TEXT-DECORATION: none} # f_text A: visited {COLOR: #000; TEXT-DECORATION: none} # f_text A: active {COLOR: #000; TEXT-DECORATION: none }# f_text A: hover {COLOR: # ff6600; TEXT-DECORATION: none} </s Tyle> <p> <! -- Image region --> </p> <! -- Numeric Button area --> </p> <table style = "BORDER-RIGHT: # bcbcbc 1px solid; BORDER-TOP: # bcbcbc 1px solid; BORDER-LEFT: # bcbcbc 1px solid; BORDER-BOTTOM: # bcbcbc 1px solid "cellspacing =" 1 "cellpadding =" 0 "width =" 100% "bgcolor =" # ffffff "border =" 0 "> <tbody> <tr> <td align = "middle" bgcolor = "# efefef"> <! -- Focus text area --> </p> </td> </tr> </tbody> </table> <p>