IE6及以上版本fixed问题解决方案,页面右下角固定页面,可以最大化、最小化、正规显示

  在窗口固定位置显示内容使用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>
View Code

  样式:

       *html  
       {
        background-image:url(about:blank);
        background-attachment:fixed;
        }
        
        /*各个小图片*/
        .bigestImg,.normalImg,.smallestImg
        {
            border:0px; 
            width: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;
            width:75px; 
        }   
        /* iframe的样式*/                
        #mapIframe
        {
             z-index:-1;
              position:absolute;
              width:250px;
              height: 250px;                         
        }
        
        /*最外层div 初始化时的样式*/
        #divMap
        {
           z-index: 1;  
           border:0px; 
           position: absolute; 
           width:250px;
           height:265px;
           overflow:hidden;
           bottom: 10px;
           right: 10px;
        }
View Code

 

  脚本:

<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>
View Code

 

posted @ 2014-04-04 16:36  金河  阅读(296)  评论(0编辑  收藏  举报