JB51 Webmaster recommended the use of JS browser-supported image rotation display effect ie,firefox_ image effects

Source: Internet
Author: User
JB51 webmaster recommended by using JS Browser-supported image rotation display effect in Ie,firefox and test everything is normal, we recommend that everyone should use such a good compatibility code
<ptml> <pead> <style type=text/css> body {margin:0 auto; padding:0 Text-align:center}. box400 {ma rgin: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 a.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-bottom: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_buttonDiv 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_butt Ondiv a:active {COLOR: #000} #f_buttonDiv a:hover {BACKGROUND: #ff840c; COLOR: #fff} #f_buttonDiv a.on:link {BACKGROUND: #ff840c; COLOR: #fff} #f_buttonDiv a.on:visited {BACKGROUND: #ff840c; COLOR: #fff} #f_buttonDiv a.on:active {BACKGROUND: #ff840c; COLOR: #fff} #f_buttonDiv a.on:hover {BACKGROUND: #ff840c; COLOR: #fff} #f_buttonDiv a.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} </STYLE> <script language=javascript> <!--function p$ (string) {Document.writ E (string); function $ (ID) {return document.getElementById (ID); function Change_menu (Id,content_id,num,total_ztc_menu,menu_on,menu_off) {for (Var i=1;i<=total_ztc_menu;i++) {$ (id+i). Classname=menu_off; $ (content_id+i). style.display= ' None '; } $ (id+num). Classname=menu_on; $ (content_id+num). style.display= ' block '; }//--> </SCRIPT> </pead> <body> <div class=box400> <div id=f_menu><span class= " "Id=f_now></span></div> <div id=f_div><!--picture area--> <div id=f_imgdiv></div> <div id=f_infodiv><!--Digital button area--> <div id=f_buttondiv></div></div></div> < 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--> <div class=f12b id=f_text>&lt ;/div> <script language=javascript type=text/javascript> <!--//modifiable region Var imgwidth=400; var imgheight=200; var _timeout_=5000; var show_text = true; Whether to display focus text Var Timeout=_timeout_; var timeout2=_timeout_/2;//onmousEout img After the need to switch time Var now=0; The first picture var target= "_blank"; Open mode var button_on = ' on '; The style name of the current focus corresponding button, var button_off = ';//non-current focus corresponding button's style name//not modifiable region var imgurl = new Array (); var imgtext = new Array (); var imglink = new Array (); var imgalt= new Array (); var menulist = new Array ();//Menu ver=2 var; Compatible browser version default 2 is non ie var firsttime=true; var n =-1; Menu Menulist[++n]= ' both inside and outside '; imgurl[n]= ' yun_qi_img/070308techartl.jpg '; Imgtext[n]= ' inside and outside repair TechArt modified 600 cayenne turbo '; imglink[n]= ' http://www.pcauto.com.cn/newcar/abroad/porsche/0703/430540.html '; Imgalt[n]= ' inside and outside repair TechArt modified 600 cayenne turbo '; Menu menulist[++n]= ' new Fox '; imgurl[n]= ' yun_qi_img/07kuanfukesi4002000309.jpg '; imgtext[n]= ' 07 Ford Fox listed Price 12.98-165800 '; imglink[n]= ' http://www.pcauto.com.cn/nation/brand/changanford/0703/430704.html '; imgalt[n]= ' 07 Ford Fox listed Price 12.98-165800 '; Menu menulist[++n]= ' Hummer Sisters '; imgurl[n]= ' yun_qi_img/'; Imgtext[n]= ' The twin sister of the carriage show is super cool '; Imglink[n]= ' Http://piclib.pcauto.com.cn/piclib/x_index.jsp '; Imgalt[n]= ' The twin sister of the carriage show is super cool '; Menu menulist[++n]= ' strip show '; imgurl[n]= ' yun_qi_img/lishufu-a98sudfoa.jpg '; Imgtext[n]= ' Li Shufu, a member of the strip show, called for support for domestic goods '; imglink[n]= ' http://www.pcauto.com.cn/news/yjpl/medium/0703/430599.html '; Imgalt[n]= ' Li Shufu, a member of the strip show, called for support for domestic goods '; Menu menulist[++n]= ' road tolls '; imgurl[n]= ' yun_qi_img/yanglufei-400200-809asudfol.jpg '; Imgtext[n]= ' deputies recommend the national reunification of road tolls levy regulations '; imglink[n]= ' http://www.pcauto.com.cn/news/hyxw/0703/430739.html '; Imgalt[n]= ' deputies recommend the national reunification of road tolls levy regulations '; Menu menulist[++n]= ' Dafa '; imgurl[n]= ' yun_qi_img/8e026ba4d70309400200.jpg '; Imgtext[n]= ' Dafa domestic car in the year listed 1.3 and 1.5 of two emissions '; imglink[n]= ' http://www.pcauto.com.cn/nation/brand/other/0703/430723.html '; Imgalt[n]= ' Dafa domestic car in the year listed 1.3 and 1.5 of two emissions '; var count=0; for (Var i=0;i "); p$ ("<!--"); p$ ("#f_menu a{width:" +each_width+ "PX;}"); p$ ("#f_menu #f_menu" + (count-1) + "{width:" +last_width+ "PX; margin:0;}"); p$ ("-->"); p$ ("</style>"); function Change () {if (ver==1) {with ($ (' f_img '). Filters[0]) {transition=1; APply (); Play (); } if (Firsttime) {firsttime=false;timeout=_timeout_/1000} else{$ (' f_img '). Src=imgurl[now]; $ (' f_img '). Alt=imgalt[now]; $ (' F_imglink '). Href=imglink[now]; if (show_text) $ (' F_text '). Innerhtml=imgtext[now]; for (Var i=0;i<count;i++) {$ (' B ' +i). classname= "button"; $ (' F_menu ' +i). classname= ""; } $ (' B ' +now). Classname= "on"; $ (' F_menu ' +now). Classname= "on"; now= (now>=imgurl.length-1) 0:now+1; Timeout=_timeout_; } thetimer=settimeout ("Change ()", timeOut); function B_change (num) {window.clearinterval (Thetimer); Now=num; Firsttime=false; Change (); //draw Gradient Line (that is, css:f_line) function Draw_line () {var div = document.createelement ("div"); div.id = ' f_line '; $ (' F_infodiv '). InsertBefore (div,$ (' F_infodiv '). Childnodes.item (0)); }//Performance layer start//menu for (Var i=0;i<count;i++) {var menu = document.createelement ("a"); Menu.classname= "F_menu" +i; Menu.id= "F_menu" +i; Menu.href= ' #'; Menu.value=i; Menu.onmouseover=function () {b_change (this.value);}; Menu.title=imgalt[i]; Menu.innerhtml=menulist[i]; $ (' F_menu '). AppendChild (menu); //Picture var a = document.createelement ("a"); A.id= "F_imglink"; A.target=target; A.href=imglink[now]; $ (' F_imgdiv '). appendchild (a); var img = document.createelement ("img"); Img.id= "F_img"; Img.width=imgwidth; Img.height=imgheight; Img.src=imgurl[now]; Img.alt=imgalt[now]; A.appendchild (IMG); Numeric button for (Var i=count-1;i>=0;i--) {var div_bg = document.createelement ("div"); div_bg.id = ' DIV_BG ' +i; Div_bg.classname= ' BG '; $ (' F_buttondiv '). appendchild (DIV_BG); var a = document.createelement ("a"); a.ID = ' B ' +i; A.classname = (i==now+1)? " Button_on ":" Button_off "; A.title=imgalt[i]; a.innerhtml=i+1; A.href= ' Javascript:b_change (' +i+ ') '; $ (' DIV_BG ' +i). appendchild (a); var div= document.createelement ("div"); $ (' F_buttondiv '). appendchild (Div); } if (Show_text) $ (' F_text '). InnerHTML = Imgtext[now]; Presentation layer End $ (' f_img '). Onmouseover=function () {window.clearinterval (thetimer);} $ (' f_img '). Onmouseout=function () {thetimer=settimeout ("Change ()", TimeOut2);} try{//Filter version new ActiveXObject ("DXImageTransform.Microsoft.Fade"); $ (' f_img '). Filters[0].play (); Ver=1; Draw_line (); catch (e) {ver=2;} var Thetimer = settimeout ("Change ()", _timeout_/1000); --> </SCRIPT> </TD></TR> </TBODY></TABLE></DIV> </body></ptml >
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.