zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    shiro密码的比对,密码的MD5加密,MD5盐值加密,多个Relme
    shiro权限配置的细节问题&认证
    shiro集成spring&工作流程&DelegatingFilterProxy
    shiro简单入门介绍
    springmvc小结(下)
    springmvc小结(上)
    springmvc(5)拦截器
    spring mvc(4)处理模型数据
    springmvc(3)注解
    深入理解javascript作用域系列第四篇——块作用域
  • 原文地址:https://www.cnblogs.com/wang7/p/3645432.html
Copyright © 2011-2022 走看看