zoukankan      html  css  js  c++  java
  • js判断浏览器的类型,动态调整div布局

    最近写页面用bootstrap和amazeUi然后发现自己写的部分和两个框架做重合时,页面大小变化后有的元素变得很乱,很乱无奈只好用js判断 window.onscroll = function scrollfunction() {}根据下滑的高度来动态设置一些元素的布局,发现还是有点问题宽度有。干脆隐藏掉一些。

     window.onscroll = function scrollfunction() {
                var dis = document.documentElement.scrollTop || document.body.scrollTop;
                var count = 0;
                if (dis > 750) {
                    var userAgent = navigator.userAgent;
                    if(userAgent.indexOf("Firefox")>-1){
                        
                    $('#forumDiv').css({"position": "absolute", "left": "380px  "})
                    $('#userInfoDiv').css({"position": "fixed", "width": "300px", "top": "50px"})
                    $('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "300px", "top": "50px","display":"none"})
                    $('#toTop').css({"bottom":"150px"})
                    }else{
                        
                    $('#forumDiv').css({"position": "absolute", "left": "380px  "})
                    $('#userInfoDiv').css({"position": "fixed", "width": "400px", "top": "50px"})
                    $('#hotKeyDiv').css({"position": "fixed", "right": "100px", "width": "400px", "top": "50px"})
                    $('#toTop').css({"bottom":"150px"})
                    }
                    count = 1;
    
                }
    
                else {
                    $('#toTop').css({"bottom":"300px"})
                    // document.getElementById("institutionDiv").style.display="block";
                    // document.getElementById("upDiv").style.display="block";
                    $('#forumDiv').css({"position": "", "left": "  "})
                    $('#userInfoDiv').css({"position": "", "width": ""})
                    $('#hotKeyDiv').css({"position": "", "right": "", "width": "","display":"block"})
                }
            }
            $(window).resize(function () {
              var windowHeight= $(window).width();
              if(windowHeight<1765){
                  document.getElementById('hotKeyDiv').style.display="none"
              }else{
                  document.getElementById('hotKeyDiv').style.display="block"
              }
            })

    加上个判断浏览器的类型。。

        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        //判断是否Opera浏览器
        if (isOpera) {
            return "Opera"
        }; 
        //判断是否Firefox浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } 
        //判断是否chorme浏览器
        if (userAgent.indexOf("Chrome") > -1){
            return "Chrome";
        }
        //判断是否Safari浏览器
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } 
        //判断是否IE浏览器
        if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
            return "IE";
        }
        //判断是否Edge浏览器
        if (userAgent.indexOf("Trident") > -1) {
            return "Edge";
        };
  • 相关阅读:
    HTTP协议及其POST与GET操作差异 & C#中如何使用POST、GET等
    php中0," ",null和false的区别
    php 上传大文件主要涉及配置upload_max_filesize和post_max_size两个选项。
    php 解决上传中文文件名时出现乱码的问题
    php学习之有用的资源 总结
    php 问题及原因总结
    php 汉字验证码
    php 图片验证码
    php 字母和数字验证码
    php 使用imagettftext()函数出问题的原因
  • 原文地址:https://www.cnblogs.com/notably/p/10561797.html
Copyright © 2011-2022 走看看