头疼了，一个ie兼容性 的有关问题
日期：2014-05-17 浏览次数：20815 次
头疼了，请教各位一个ie兼容性 的问题
JSP：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="imgJSP.js"></script>
<title>123</title>
<link href="imgJSP.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="imgDiv"><img id="imgImg"/></div>
<div id="tipDiv"></div>
</body>
</html>
imgJSP.css：
#imgDiv {
position:absolute;
width:550px;
height:400px;
z-index:1;
border-width: 1px;
border-style: solid;
border-color: #0CF;
top:0px;
left:0px;
}
#tipDiv {
position:absolute;
width:550px;
height:20px;
z-index:1;
top: 400px;
left:0px;
border-width: 1px;
border-style: solid;
border-color: #0CF;
}
#imgImg {
position:absolute;
width:550px;
height:400px;
z-index:2;
top:0px;
left:0px;
}
imgJSP.js:
//存放图片
var imgsrc= new Array();
//图片数量
var imgnum=0;
//当前图片位置
var imgnow=0;
//每个浮动层的宽度
var fwidth =0;
//最后一个浮动层的宽度
var restwidth
//时间对象
var time
//示例
imgsrc[0]="img/201201.jpg";
imgsrc[1]="img/201202.jpg";
imgsrc[2]="img/201203.jpg";
imgsrc[3]="img/201204.jpg";
imgsrc[4]="img/201205.jpg";
imgsrc[5]="img/201206.jpg";
imgsrc[6]="img/201207.jpg";
jQuery(document).ready(function(){
//图片预加载
var arr = new Array();
for(var i=0; i<imgsrc.length; i++) {
arr[i] = new Image();
arr[i].src=imgsrc[i];
arr[i].onload;
}
$("#imgImg").attr("src",imgsrc[0]);
//浮动层的宽
iwidth =$("#imgDiv").width();
fwidth=parseInt(iwidth/imgsrc.length);
restwidth = iwidth-fwidth*(imgsrc.length-1);
//添加div浮动层
for(var i=0; i<imgsrc.length; i++) {
if(i<imgsrc.length-1){
html="<div id='img"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}else {
html="<div id='img"+i+"' style='position:absolute; width:"+restwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}
$('#imgDiv').append(html);
if(i<imgsrc.length-1){
html2="<div id='tip"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;z-index:3'></div>";
}else{
widthThis =restwidth-1;
html2="<div id='tip"+i+"' style='position:absolute; width:"+widthThis+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;border-right-width:1px;border-right-style: solid;border-right-color: #0CF;z-index:3'></div>";
}
$('#tipDiv').append(html2);
}
$('#tipDiv').css("background-color","#9FF");
$('#tip0').css("background-color","yellow");
JSP：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="imgJSP.js"></script>
<title>123</title>
<link href="imgJSP.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="imgDiv"><img id="imgImg"/></div>
<div id="tipDiv"></div>
</body>
</html>
imgJSP.css：
#imgDiv {
position:absolute;
width:550px;
height:400px;
z-index:1;
border-width: 1px;
border-style: solid;
border-color: #0CF;
top:0px;
left:0px;
}
#tipDiv {
position:absolute;
width:550px;
height:20px;
z-index:1;
top: 400px;
left:0px;
border-width: 1px;
border-style: solid;
border-color: #0CF;
}
#imgImg {
position:absolute;
width:550px;
height:400px;
z-index:2;
top:0px;
left:0px;
}
imgJSP.js:
//存放图片
var imgsrc= new Array();
//图片数量
var imgnum=0;
//当前图片位置
var imgnow=0;
//每个浮动层的宽度
var fwidth =0;
//最后一个浮动层的宽度
var restwidth
//时间对象
var time
//示例
imgsrc[0]="img/201201.jpg";
imgsrc[1]="img/201202.jpg";
imgsrc[2]="img/201203.jpg";
imgsrc[3]="img/201204.jpg";
imgsrc[4]="img/201205.jpg";
imgsrc[5]="img/201206.jpg";
imgsrc[6]="img/201207.jpg";
jQuery(document).ready(function(){
//图片预加载
var arr = new Array();
for(var i=0; i<imgsrc.length; i++) {
arr[i] = new Image();
arr[i].src=imgsrc[i];
arr[i].onload;
}
$("#imgImg").attr("src",imgsrc[0]);
//浮动层的宽
iwidth =$("#imgDiv").width();
fwidth=parseInt(iwidth/imgsrc.length);
restwidth = iwidth-fwidth*(imgsrc.length-1);
//添加div浮动层
for(var i=0; i<imgsrc.length; i++) {
if(i<imgsrc.length-1){
html="<div id='img"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}else {
html="<div id='img"+i+"' style='position:absolute; width:"+restwidth+"px; height:100%;top:0; left:"+fwidth*i+"px;opacity:0; z-index:3'></div>";
}
$('#imgDiv').append(html);
if(i<imgsrc.length-1){
html2="<div id='tip"+i+"' style='position:absolute; width:"+fwidth+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;z-index:3'></div>";
}else{
widthThis =restwidth-1;
html2="<div id='tip"+i+"' style='position:absolute; width:"+widthThis+"px; height:100%;top:0; left:"+fwidth*i+"px; border-left-width:1px;border-left-style: solid;border-left-color: #0CF;border-right-width:1px;border-right-style: solid;border-right-color: #0CF;z-index:3'></div>";
}
$('#tipDiv').append(html2);
}
$('#tipDiv').css("background-color","#9FF");
$('#tip0').css("background-color","yellow");
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
