在窗口固定位置显示内容使用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=0; scrolling="no" > </iframe> </div>
样式:
*html { background-image:url(about:blank); background-attachment:fixed; } /*各个小图片*/ .bigestImg,.normalImg,.smallestImg { border:0px; 15px; height:15px; z-index: 3 ; position: absolute; cursor:pointer; } /*3个小图片中间间隔5px,和两边间隔10px */ .smallestImg { left:10px; } .normalImg { left:30px; } .bigestImg { left: 50px; } /* 3个小图片外层的div */ .divMapTool { left:0px; z-index:2; position: absolute; height: 15px; 75px; } /* iframe的样式*/ #mapIframe { z-index:-1; position:absolute; 250px; height: 250px; } /*最外层div 初始化时的样式*/ #divMap { z-index: 1; border:0px; position: absolute; 250px; height:265px; overflow:hidden; bottom: 10px; right: 10px; }
脚本:
<script type="text/javascript"> $(function () { $(".smallestImg").click(function () { $("#mapIframe").height(0).width(0); //最小化不显示Iframe $("#divMap").height(20).width(75); }); $(".normalImg").click(function () { $("#divMap").height(265).width(250) ; $("#mapIframe").height(250).width(250); }); $(".bigestImg").click(function () { var height = $(window).height(); var width = $(window).width(); $("#divMap").height(height - 20).width(width - 20); $("#mapIframe").height(height - 35).width(width - 20); }); }); </script>