欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！

您现在的位置是：首页 > IT编程

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

程序员文章站 2023-11-17 19:10:16

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码 body {mar...

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<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 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_buttondiv 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>
<div class="box400"> 
<div id="f_menu"><span class="" id="f_now"></span></div> 
<div id="f_div">
 
 
<div id="f_infodiv">
 
</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">
 
       
      </td></tr></tbody></table>
</div>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

上一篇： C#查找对象在ArrayList中出现位置的方法

下一篇： C# yield在WCF中的错误用法（一）

推荐阅读