jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码
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
}
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
推荐阅读
绝对经典的滑轮新闻显示(javascript+css)实现
绝对经典的滑轮新闻显示(javascript+css)很早就有了,今天又见到,拿出来大家分享一下。。。效果如下图:screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.al>>>详细阅读
本文标题:jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
地址:http://www.17bianji.com/kaifa2/JS/30726.html
1/2 1