• 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; 
                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;
            }
    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
  • 相关阅读:
    vue3 transition 动画变化与示例
    vue3中自定义指令和组件保持一致
    Vue3中使用vue-router跳转与传参
    Ext JS 二级弹框问题
    /usr/sbin/ntpd: error while loading shared libraries: libopts.so.25
    Spark Sql之pathGlobFilter 和recursiveFileLookup 选项关于分区的一点猜想和验证
    Hive之count函数的特别用法
    EasyTouch和NGUI的使用心得
    Unity 3D类结构简介
    Unity 3D入门简介
  • 原文地址:https://www.cnblogs.com/wang7/p/3645432.html
Copyright © 2020-2023  润新知