在窗口固定位置显示内容使用fixed,但是 IE 6 不支持,后来我搜了很多方法,都没有作用,后来类比着一个网站的代码,使用absolute 、z-index解决了问题。
页面div结构:
<div runat="server" id="divMap" class="divMap" >
<div class="divMapTool">
<img alt="最大" title="最大" class="bigestImg" src="../../Css/images/bigest.JPG" />
<img alt="正常" title="正常" class="normalImg" src="../../Css/images/normal.JPG" />
<img alt="最小" title="最小" class="smallestImg" src="../../Css/images/smallest.JPG" />
</div>
<iframe runat="server" id="mapIframe" src="http://192.168.27.208/webgis/webgis.html" frameborder=; scrolling="no" >
</iframe>
</div>
样式:
*html
{
background-image:url(about:blank);
background-attachment:fixed;
} /*各个小图片*/
.bigestImg,.normalImg,.smallestImg
{
border:0px;
width:15px;
height:15px;
z-index: ;
position: absolute;
cursor:pointer; }
/*3个小图片中间间隔5px,和两边间隔10px */
.smallestImg
{
left:10px;
}
.normalImg
{
left:30px;
}
.bigestImg
{
left: 50px;
} /* 3个小图片外层的div */
.divMapTool
{
left:0px;
z-index:;
position: absolute;
height: 15px;
width:75px;
}
/* iframe的样式*/
#mapIframe
{
z-index:-;
position:absolute;
width:250px;
height: 250px;
} /*最外层div 初始化时的样式*/
#divMap
{
z-index: ;
border:0px;
position: absolute;
width:250px;
height:265px;
overflow:hidden;
bottom: 10px;
right: 10px;
}
脚本:
<script type="text/javascript"> $(function () { $(".smallestImg").click(function () {
$("#mapIframe").height().width(); //最小化不显示Iframe
$("#divMap").height().width();
}); $(".normalImg").click(function () {
$("#divMap").height().width() ;
$("#mapIframe").height().width(); }); $(".bigestImg").click(function () {
var height = $(window).height();
var width = $(window).width();
$("#divMap").height(height - ).width(width - );
$("#mapIframe").height(height - ).width(width - );
}); }); </script>