CSS-鼠标移到图片上,显示相关信息时浏览器兼容问题

CSS-鼠标移到图片上,显示相关信息时浏览器兼容问题

灵芸 发布于 2017-04-04 字数 9348 浏览 1097 回复 2

做一个图片滚动的效果。展示的图片有鼠标移上的效果,但是浏览器不兼容,只有火狐是正常的,
ie是我将鼠标在图片上,会在图片的后面;
google是在第一次加载时图片的位置,而没有在点击后跟图片一起向前。

大家还是看一下效果吧,我说不太清楚~

代码是:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动效果</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://insurance.cnfol.com/fol_inc/v5.0/ads/wine/ScrollPic.js"></script>

<style>
body {
font: 400 12px/24px Verdana,'宋体';
overflow: visible;
text-align: center;
color: #333333;
}.L {
float: left;
}
.R {
float: right;
}
.W {
width: 960px;
}
.Mt9 {
margin-top: 10px;
}
.W {
margin: 0 auto;
text-align: left;
}

.scrollPic02 {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

height: 186px;
padding: 15px 0;
}
.scrollArrLeft02 {
background: url("http://hs.cnfol.com/ua/imgs/cms/insIBG.gif") no-repeat scroll -208px -29px transparent;
cursor: pointer;
height: 27px;
margin: 65px 0 0 10px;
width: 20px;
}
.SPCont02 {
margin-left: 20px;
margin-top: 5px;
width: 852px;
}
.SPCont02 div {
/*width: 2272px;*/
}

.SPCont02 a {
display: block;
float: left;
height: 186px;
margin: 0;
text-align: center;
width: 142px;
}
.SPCont02 a span{
display:none;
position:absolute;
filter: Alpha(Opacity=80);
opacity:0.8;
-moz-opacity:0.8;
background-color: #b8a181;
width:100px;
height:30px;
text-decoration:none;
font-size:12px;
color: #ffffff;
z-index:100;
line-height:38px;
top:150px !important;
top:60px;
}
.SPCont02 a:hover span{
display:block;
}
a, i {
font-style: normal;
text-decoration: none;
}
.SPCont02 a img {
display: block;
margin: 0 auto;
}
img {
border: medium none;
}

.scrollArrRight02 {
background: url("http://hs.cnfol.com/ua/imgs/cms/insIBG.gif") no-repeat scroll -315px -29px transparent;
cursor: pointer;
height: 27px;
margin: 65px 10px 0 0;
width: 20px;
}
.SPCont02 a img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>

<div id="scrollCont_01" class="SPCont01 L"></div>
<div class="W Mt9">
<div class="scrollPic02">
<div class="scrollArrLeft02 L" id="scrollArrLeft_02"></div>
<div id="scrollCont_02" class="SPCont02 L">
<div>
<a target="_blank" href="http://special.cnfol.com/3514,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876999.jpg"><span>《北大商业评论》</span></a>
<a target="_blank" href="http://special.cnfol.com/3515,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876998.jpg"><span>《投资与合作》</span></a>
<a target="_blank" href="http://special.cnfol.com/3519,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_876971.jpg"><span>《投资有道》</span></a>
<a target="_blank" href="http://special.cnfol.com/3524,00.shtml"><img border="0" alt="" src="http://i2.cnfolimg.com/money/1_864022.jpg"><span>《投资与理财》</span></a>
<a target="_blank" href="http://special.cnfol.com/3903,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864021.gif"><span>《保险赢家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3876,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864020.gif"><span>《保险文化》</span></a>
<a target="_blank" href="http://special.cnfol.com/1961,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864018.gif"><span>《第一财经日报》</span></a>
<a target="_blank" href="http://special.cnfol.com/3525,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864017.jpg"><span>《保险家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3514,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876999.jpg"><span>《北大商业评论》</span></a>
<a target="_blank" href="http://special.cnfol.com/3515,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876998.jpg"><span>《投资与合作》</span></a>
<a target="_blank" href="http://special.cnfol.com/3519,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_876971.jpg"><span>《投资有道》</span></a>
<a target="_blank" href="http://special.cnfol.com/3524,00.shtml"><img border="0" alt="" src="http://i2.cnfolimg.com/money/1_864022.jpg"><span>《投资与理财》</span></a>
<a target="_blank" href="http://special.cnfol.com/3903,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864021.gif"><span>《保险赢家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3876,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864020.gif"><span>《保险文化》</span></a>
<a target="_blank" href="http://special.cnfol.com/1961,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864018.gif"><span>《第一财经日报》</span></a>
</div>
</div>
<div class="scrollArrRight02 R" id="scrollArrRight_02"></div>
</div>
</div>

<script type="text/javascript">
var scrollPic_01 = new ScrollPic();
scrollPic_01.scrollContId = "scrollCont_01"; //内容容器ID
scrollPic_01.arrLeftUpId = "scrollArrLeft_01"; //左箭头ID
scrollPic_01.arrRightDownId = "scrollArrRight_01"; //右箭头ID

scrollPic_01.arrVertical = true;

scrollPic_01.frameSet = 234; //显示框宽度
scrollPic_01.pageSet = 234; //翻页宽度

scrollPic_01.speed = 10; //移动速度(单位毫秒,越小越快)
scrollPic_01.space = 15; //每次移动像素(单位px,越大越快)
scrollPic_01.autoPlay = true; //自动播放
scrollPic_01.autoPlayTime = 15; //自动播放间隔时间(秒)

scrollPic_01.initialize(); //初始化


var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "scrollCont_02"; //内容容器ID
scrollPic_02.arrLeftUpId = "scrollArrLeft_02"; //左箭头ID
scrollPic_02.arrRightDownId = "scrollArrRight_02"; //右箭头ID

scrollPic_02.arrVertical = true;

scrollPic_02.frameSet = 852; //显示框宽度
scrollPic_02.pageSet = 852; //翻页宽度

scrollPic_02.speed = 10; //移动速度(单位毫秒,越小越快)
scrollPic_02.space = 15; //每次移动像素(单位px,越大越快)
scrollPic_02.autoPlay = true; //自动播放
scrollPic_02.autoPlayTime = 15; //自动播放间隔时间(秒)

scrollPic_02.initialize(); //初始化
</script>
</body>
</html>

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

偏爱自由 2017-10-23 2 楼

给你改好并测试通过了,各浏览器都没有问题,代码改的地方看下方的比较图,右侧是改过后的

以下是改后的代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片滚动效果</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<script type="text/javascript" src="http://insurance.cnfol.com/fol_inc/v5.0/ads/wine/ScrollPic.js"></script>

<style>
body {
font: 400 12px/24px Verdana,'宋体';
overflow: visible;
text-align: center;
color: #333333;
}.L {
float: left;
}
.R {
float: right;
}
.W {
width: 960px;
}
.Mt9 {
margin-top: 10px;
}
.W {
margin: 0 auto;
text-align: left;
}

.scrollPic02 {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;

height: 186px;
padding: 15px 0;
}
.scrollArrLeft02 {
background: url("http://hs.cnfol.com/ua/imgs/cms/insIBG.gif") no-repeat scroll -208px -29px transparent;
cursor: pointer;
height: 27px;
margin: 65px 0 0 10px;
width: 20px;
}
.SPCont02 {
margin-left: 20px;
margin-top: 5px;
width: 852px;
position:relative;
}
.SPCont02 div {
/width: 2272px;/
}

.SPCont02 a {
display: block;
float: left;
height: 186px;
margin: 0;
text-align: center;
width: 142px;
}
.SPCont02 a span{
display:none;
position:absolute;
filter: Alpha(Opacity=80);
opacity:0.8;
-moz-opacity:0.8;
background-color: #b8a181;
width:100px;
height:30px;
text-decoration:none;
font-size:12px;
color: #ffffff;
z-index:100;
line-height:38px;
top:90px;
}
.SPCont02 a:hover span{
display:block;
}
a, i {
font-style: normal;
text-decoration: none;
}
.SPCont02 a img {
display: block;
margin: 0 auto;
}
img {
border: medium none;
}

.scrollArrRight02 {
background: url("http://hs.cnfol.com/ua/imgs/cms/insIBG.gif") no-repeat scroll -315px -29px transparent;
cursor: pointer;
height: 27px;
margin: 65px 10px 0 0;
width: 20px;
}
.SPCont02 a img {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>

<div id="scrollCont_01" class="SPCont01 L"></div>
<div class="W Mt9">
<div class="scrollPic02">
<div class="scrollArrLeft02 L" id="scrollArrLeft_02"></div>
<div id="scrollCont_02" class="SPCont02 L">
<div>
<a target="_blank" href="http://special.cnfol.com/3514,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876999.jpg"><span>《北大商业评论》</span></a>
<a target="_blank" href="http://special.cnfol.com/3515,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876998.jpg"><span>《投资与合作》</span></a>
<a target="_blank" href="http://special.cnfol.com/3519,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_876971.jpg"><span>《投资有道》</span></a>
<a target="_blank" href="http://special.cnfol.com/3524,00.shtml"><img border="0" alt="" src="http://i2.cnfolimg.com/money/1_864022.jpg"><span>《投资与理财》</span></a>
<a target="_blank" href="http://special.cnfol.com/3903,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864021.gif"><span>《保险赢家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3876,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864020.gif"><span>《保险文化》</span></a>
<a target="_blank" href="http://special.cnfol.com/1961,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864018.gif"><span>《第一财经日报》</span></a>
<a target="_blank" href="http://special.cnfol.com/3525,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864017.jpg"><span>《保险家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3514,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876999.jpg"><span>《北大商业评论》</span></a>
<a target="_blank" href="http://special.cnfol.com/3515,00.shtml"><img border="0" alt="" src="http://i1.cnfolimg.com/money/1_876998.jpg"><span>《投资与合作》</span></a>
<a target="_blank" href="http://special.cnfol.com/3519,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_876971.jpg"><span>《投资有道》</span></a>
<a target="_blank" href="http://special.cnfol.com/3524,00.shtml"><img border="0" alt="" src="http://i2.cnfolimg.com/money/1_864022.jpg"><span>《投资与理财》</span></a>
<a target="_blank" href="http://special.cnfol.com/3903,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864021.gif"><span>《保险赢家》</span></a>
<a target="_blank" href="http://special.cnfol.com/3876,00.shtml"><img border="0" alt="" src="http://i3.cnfolimg.com/money/1_864020.gif"><span>《保险文化》</span></a>
<a target="_blank" href="http://special.cnfol.com/1961,00.shtml"><img border="0" alt="" src="http://i0.cnfolimg.com/money/1_864018.gif"><span>《第一财经日报》</span></a>
</div>
</div>
<div class="scrollArrRight02 R" id="scrollArrRight_02"></div>
</div>
</div>

<script type="text/javascript">
var scrollPic_01 = new ScrollPic();
scrollPic_01.scrollContId = "scrollCont_01"; //内容容器ID
scrollPic_01.arrLeftUpId = "scrollArrLeft_01"; //左箭头ID
scrollPic_01.arrRightDownId = "scrollArrRight_01"; //右箭头ID

scrollPic_01.arrVertical = true;

scrollPic_01.frameSet = 234; //显示框宽度
scrollPic_01.pageSet = 234; //翻页宽度

scrollPic_01.speed = 10; //移动速度(单位毫秒,越小越快)
scrollPic_01.space = 15; //每次移动像素(单位px,越大越快)
scrollPic_01.autoPlay = true; //自动播放
scrollPic_01.autoPlayTime = 15; //自动播放间隔时间(秒)

scrollPic_01.initialize(); //初始化

var scrollPic_02 = new ScrollPic();
scrollPic_02.scrollContId = "scrollCont_02"; //内容容器ID
scrollPic_02.arrLeftUpId = "scrollArrLeft_02"; //左箭头ID
scrollPic_02.arrRightDownId = "scrollArrRight_02"; //右箭头ID

scrollPic_02.arrVertical = true;

scrollPic_02.frameSet = 852; //显示框宽度
scrollPic_02.pageSet = 852; //翻页宽度

scrollPic_02.speed = 10; //移动速度(单位毫秒,越小越快)
scrollPic_02.space = 15; //每次移动像素(单位px,越大越快)
scrollPic_02.autoPlay = true; //自动播放
scrollPic_02.autoPlayTime = 15; //自动播放间隔时间(秒)

scrollPic_02.initialize(); //初始化
</script>
</body>
</html>

偏爱自由 2017-04-08 1 楼

你引用的http://insurance.cnfol.com/fol_inc/v5.0/ads/wine/ScrollPic.js文件有点问题,少了个分号。把该代码下载放到你页面里

<SCRIPT LANGUAGE="JavaScript">
<!--
//ScrollPic.js内容,最后加个“;”
//-->
</SCRIPT>

我在ie6、chrome下测试没问题!