首页 > 代码库 > 一个控制背景的显示公共方法 包括对ie的兼容性
一个控制背景的显示公共方法 包括对ie的兼容性
var ww; var wh; var ieVer=IEVersion(); var chVer=ChromeVersion(); var browserType=browser(); var expandNav=false; //让IE8支持forEach if ( !Array.prototype.forEach ) { Array.prototype.forEach = function forEach( callback, thisArg ) { var T, k; if ( this == null ) { throw new TypeError( "this is null or not defined" ); } var O = Object(this); var len = O.length >>> 0; if ( typeof callback !== "function" ) { throw new TypeError( callback + " is not a function" ); } if ( arguments.length > 1 ) { T = thisArg; } k = 0; while( k < len ) { var kValue; if ( k in O ) { kValue = http://www.mamicode.com/O[ k ];"display: block" src="http://www.mamicode.com/‘+getImgUrl(‘hanburger-button‘)+‘" border=0 ondragstart="return false;"/>‘); } if(ltIE9() || browserType==‘Safari‘){ var fontArr=[‘xi‘,‘zhengcu‘,‘putong‘]; fontArr.forEach(function(e){ $(‘.font-‘+e).removeClass(‘font-‘+e).addClass(‘font-native-‘+e); }); } }); function resizeHook(first){} //判断浏览器版本是否低于IE9 function ltIE9(){ return ieVer && ieVer<9; } //查询IE浏览器版本 function IEVersion(userAgent){ var UA = userAgent || navigator.userAgent; if(/msie/i.test(UA)){ return UA.match(/msie (\d+\.\d+)/i)[1]*1; }else if(~UA.toLowerCase().indexOf(‘trident‘) && ~UA.indexOf(‘rv‘)){ return UA.match(/rv:(\d+\.\d+)/)[1]*1; } return false; } //查询Chrome浏览器大版本 function ChromeVersion(){ if(browser()!=‘Chrome‘){ return false; } var agent = navigator.userAgent.toLowerCase() ; var regStr_chrome = /chrome\/[\d.]+/gi ; var info=(agent.match(regStr_chrome)+"").replace(/[^0-9.]/ig,""); return /^([0-9]+)\./.exec(info)[1]*1; } //判断浏览器种类 function browser(){ if (!!window.ActiveXObject || "ActiveXObject" in window) return "IE";//判断是否IE浏览器 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf("Opera") > -1; if (isOpera) { return "Opera" } //判断是否Opera浏览器 if (userAgent.indexOf("Edge") > -1) { return "Edge"; } //判断是否Edge浏览器 if (userAgent.indexOf("Firefox") > -1) { return "FF"; } //判断是否Firefox浏览器 if (userAgent.indexOf("Chrome") > -1){ return "Chrome"; } if (userAgent.indexOf("Safari") > -1) { if(userAgent.indexOf("Windows") > -1){ return "Safari for Win"; } return "Safari"; } //判断是否Safari浏览器 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) { return "IE"; } //判断是否IE浏览器 } //判断是否不支持SVG function noSVG(){ return ltIE9() || browserType==‘Safari for Win‘ || (chVer && chVer<31); } function getImgUrl(token) { var urls = { "hanburger-button-close": "img/hanburger-button-close.png", "hanburger-button": "img/hanburger-button.png", "header_logo": "img/header_logo.png", "header_description": "img/header_description.png", }; return $(‘.at-level-1‘).length>0 ? urls[token] : ‘../‘ + urls[token]; }
function resizeHook(){ if(ww<=720){ var $bf=$(‘#bg-float‘); $bf.css(‘width‘,ww+‘px‘); var bf_height=ww/720*534; if(wh>$bf.offset().top+bf_height){ $bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘); } } }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta content="always" name="referrer"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>关于凯京 - 凯京集团</title> <link rel="stylesheet" href="http://www.mamicode.com/css/public.css"> <link rel="stylesheet" href="http://www.mamicode.com/css/hamburger.css"> <link rel="stylesheet" href="http://www.mamicode.com/css/about-yudian.css"> <!--[if lt IE 9]> <script src="http://www.mamicode.com/js/respond.min.js"></script> <script src="http://www.mamicode.com/js/html5shiv.min.js"></script> <![endif]--> <script src="http://www.mamicode.com/js/prefixfree.min.js"></script> <script src="http://www.mamicode.com/js/jquery.min.js"></script> </head> <body> <header class="limit-parent-header at-level-2"> <div class="limit-header"> <a href="http://www.mamicode.com/index.html"><img id="logo" src="http://www.mamicode.com/img/header_logo.svg" border=0 ondragstart="return false;"></a> <img id="logo_description" src="http://www.mamicode.com/img/header_description.svg" ondragstart="return false;"> <div id="right_button" class="nav-button"> <section class="mod model-1"> <div class="menu-button"> <div class="bar"></div> <div class="bar"></div> </div> </section> </div> <nav class="font-xi"> <ul class="menu"> <li class="menu-item"><a href="http://www.mamicode.com/index.html">首页</a></li> <li class="menu-item active-li"><a class="active-a" href="http://www.mamicode.com/about-yudian.html">关于凯京</a></li> <li class="menu-item has-sub-menu"><a href="http://www.mamicode.com/group-business.html">集团板块</a> <div class="sub-menu-div"> <div class="sub-menu-arrow"></div> <ul class="sub-menu"> <li class="sub-menu-item"><a href="http://www.mamicode.com/chuangpu.html">商业保理</a></li> <li class="sub-menu-item has-top-line"><a href="http://www.mamicode.com/kaijing.html">融资租赁</a></li> <li class="sub-menu-item has-top-line"><a href="http://www.mamicode.com/luchang.html">信息科技</a></li> </ul> </div> </li> <li class="menu-item last-menu-item"><a href="http://www.mamicode.com/contact.html">联系我们</a></li> <li class="menu-item new-menu-item"><a href="http://cloud.keking.cn" target="_blank">商户登录</a></li> </ul> </nav> <div class="clearer"></div> </div> </header> <div id="bg"></div> <div id="container" class="limit-parent-article"> <article class="limit-article"> <p class="title font-zhengcu">凯京集团是什么?</p> <div class="content font-putong"> <p>上海凯京信达科技集团有限公司(“凯京集团”),2015年成立于上海陆家嘴,专注为中小微企业和个人提供各类场景下的信贷服务,产品包括商业保理业务、融资租赁业务、供应链金融、大数据征信等。</p> <p>公司2015年获得知名投资机构数千万元人民币天使轮投资,2016年2月获得<b class="font-zhengcu">红杉资本</b>领投的1亿元人民币A轮投资,2016年12月获得由<b class="font-zhengcu">中航信托</b>领投、<b class="font-zhengcu">红杉资本</b>、<b class="font-zhengcu">复朴资本</b>跟投的2亿人民币B轮融资。</p> <p>我们的使命:数据重构物流</p> <p>我们的愿景:最具价值的数据科技企业</p> </div> </article> <img id="bg-float" src="http://www.mamicode.com/img/about_yudian_bg_float_mobile.png" ondragstart="return false;"> </div> <script src="http://www.mamicode.com/js/public.js"></script> <script src="http://www.mamicode.com/js/about-yudian.js"></script> <!--[if lt IE 9]> <script src="http://www.mamicode.com/js/rem.min.js"></script> <![endif]--> </body> </html>
about-yudian.css /*# sourceURL=../css/about-yudian.css */ /*@ sourceURL=../css/about-yudian.css */ #bg{ background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg"); background-position: 50% 100%; background-size: cover; -ms-behavior: url("../js/backgroundsize.min.htc"); } #bg-float{ display: none; } .content{ font-size: 1rem; color: #444444; margin-top: 60px; line-height: 2.0rem; font-weight: 400; letter-spacing: 0.05rem; text-align: justify; } .content>p{ margin: 0.5rem 0; } b{ font-size: 1.2rem; } @media (max-height: 750px) and (min-width: 721px) { #bg { background-position: 50% 70%; } } @media (max-width: 720px) { #bg { background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg"); background-position: 50% 100%; background-size: cover; -ms-behavior: url("../js/backgroundsize.min.htc"); } #bg-float{ display: block; margin-left: -40px; } .content{ font-size: 1rem; color: #444444; margin-top: 36px; line-height: 1.8rem; } }
hamburgur.css /*# sourceURL=../css/about-yudian.css */ /*@ sourceURL=../css/about-yudian.css */ #bg{ background-image:url("http://www.keking.cn/css/../img/about_yudian_bg.jpg"); background-position: 50% 100%; background-size: cover; -ms-behavior: url("../js/backgroundsize.min.htc"); } #bg-float{ display: none; } .content{ font-size: 1rem; color: #444444; margin-top: 60px; line-height: 2.0rem; font-weight: 400; letter-spacing: 0.05rem; text-align: justify; } .content>p{ margin: 0.5rem 0; } b{ font-size: 1.2rem; } @media (max-height: 750px) and (min-width: 721px) { #bg { background-position: 50% 70%; } } @media (max-width: 720px) { #bg { background-image: url("http://www.keking.cn/css/../img/about_yudian_bg_mobile.jpg"); background-position: 50% 100%; background-size: cover; -ms-behavior: url("../js/backgroundsize.min.htc"); } #bg-float{ display: block; margin-left: -40px; } .content{ font-size: 1rem; color: #444444; margin-top: 36px; line-height: 1.8rem; } }
public.css /*# sourceURL=../css/public.css */ /*@ sourceURL=../css/public.css */ *{ transition: 0.3s; } html{ font-family: ‘PingFang SC‘,‘Helvetica Neue‘,Helvetica,‘Hiragino Sans GB‘,STHeitiSC-Light,‘Microsoft YaHei‘,Arial,sans-serif; font-size: 16px; } body { margin: 0; overflow: hidden; } a{ text-decoration: none; } header { height: 60px; background-color: #283e56; user-select: none; z-index: 100; } .font-xi, .font-native-xi{ font-weight: 300; } .font-zhengcu, .font-native-zhengcu{ font-weight: 900; } .limit-header{ display: inline-block; position: relative; text-align: left; transition: none; width: 1000px; } .limit-article{ display: inline-block; position: relative; text-align: left; width: 900px; transition: none; } .limit-parent-header{ text-align: center; transition: none; } .limit-parent-article{ text-align: center; transition: none; } #logo{ margin-top: 18px; height: 24px; transition: none; } #logo_description{ position: relative; top: -4px; margin-left: 10px; height: 12px; transition: none; } .clearer{ clear: both; } #right_button { display: none; } header nav{ position: absolute; top: 0; right: 0; } .menu,.sub-menu{ padding: 0; margin: 0; } .menu-item{ position: relative; float: left; background-color: #283e56; list-style: none; text-align: center; overflow: visible; } .menu-item>a{ display: inline-block; width: 90px; height: 60px; line-height: 60px; color: white; text-decoration: none; font-size: 0.8rem; } .menu-item>a:hover,.menu-item>a.active-a{ color: rgba(255,255,255,0.7); } .menu-item.active-li{ background-color: #1A2B44; color: rgba(255,255,255,0.7); } .sub-menu-div{ display: none; position: absolute; z-index: 100; width: 135px; left: -22.5px; transition: none; } .sub-menu-arrow{ width:0; height:0; border-width:8px; border-style:dashed dashed solid; border-color:transparent transparent #283e56; font-size:0; line-height:0; margin: 0 auto; } .sub-menu-item{ list-style: none; background-color: #283e56; } .sub-menu-item>a{ display: inline-block; line-height: 30px; color: white; text-decoration: none; font-size: 0.7rem; font-weight: 300; width: 100%; height: 30px; } .sub-menu-item>a:hover{ color: rgba(255,255,255,0.7); } .has-top-line{ border-top: 0.5px solid #607284; } #bg{ position: absolute; width: 100%; top:60px; left:0; transition: none; z-index: -999; opacity: 0.9; } #container{ margin: 0; overflow-x: hidden; overflow-y: auto; position: relative; transition: none; } .title{ font-size: 2.2rem; font-weight: bold; text-align: center; color: #555555; margin-top: 90px; letter-spacing: 0.1rem; } .footer-holder{ height: 40px; } /*@media (max-width: 1000px) and (min-width: 801px) {*/ /*.limit-header{*/ /*width: 700px;*/ /*}*/ /*.limit-article{*/ /*width: 700px;*/ /*}*/ /*}*/ @media (max-width:1024px) and (min-width: 721px) { .limit-header{ width: 700px; } #logo{ width:230px; } .limit-article{ width: 700px; } } @media (max-height: 750px) and (min-width: 721px) { .title{ margin-top: 60px; } } @media (max-width: 720px) { .limit-header{ position: relative; text-align: left; display: block; width: auto; } .limit-article{ display: inline-block; position: relative; text-align: left; max-width: 900px; width: auto; } .limit-parent-header{ padding:0 15px; text-align: center; } .limit-parent-article{ padding:0 40px; text-align: center; } header { height: 46px; } #logo{ margin-top: 15px; height: 16px; } #logo_description{ position: relative; top: -3px; margin-left: 6px; height: 9px; } #right_button { display: block; float: right; width: 28px; height: 28px; margin-top: 9px; cursor: pointer; } header nav{ position: absolute; top: 46px; left: 0; z-index: 100; margin: 0 -15px; background-color: #283e56; display: none; transition: none; padding-top: 20px; } .menu{ margin: 0 40px; } .sub-menu{ margin: 0; } .menu-item{ float: none; position: relative; background-color: #283e56; text-align: left; font-weight: bold; } .menu-item>a{ display: block; width: 100%; height: 45px; line-height: 45px; border-bottom: 0.5px solid #a9b2bb; } .menu-item>a:hover,.menu-item>a.active-a,.sub-menu-item>a.active-a{ color: rgba(255,255,255,0.7); } .menu-item.active-li{ background-color: #283e56; color: rgba(255,255,255,0.7); } .sub-menu-div{ display: block; position: relative; width: 100%; left: 0; } .sub-menu-arrow{ display: none; } .sub-menu-item{ list-style: none; background-color: #283e56; } .sub-menu-item>a{ display: block; line-height: 45px; font-size: 0.8rem; height: 45px; border-bottom: 0.5px solid #a9b2bb; padding-left: 60px; } .sub-menu-item>a:hover{ color: rgba(255,255,255,0.7); } .has-top-line{ border-top: none; } .last-menu-item a{ border-bottom: 1.5px solid white; } .new-menu-item{ display: none; } #bg{ top:46px; } .title{ font-size: 1.6rem; font-weight: bold; text-align: center; color: #333333; margin-top: 40px; } } #logo_description{ display: none; }
插件 prefiexfree.min /** * StyleFix 1.0.3 & PrefixFree 1.0.7 * @author Lea Verou * MIT license */ (function(){function m(a,b){return[].slice.call((b||document).querySelectorAll(a))}if(window.addEventListener){var e=window.StyleFix={link:function(a){var b=a.href||a.getAttribute("data-href");try{if(!b||"stylesheet"!==a.rel||a.hasAttribute("data-noprefix"))return}catch(p){return}var d=b.replace(/[^\/]+$/,""),f=(/^[a-z]{3,10}:/.exec(d)||[""])[0],h=(/^[a-z]{3,10}:\/\/[^\/]+/.exec(d)||[""])[0],k=/^([^?]*)\??/.exec(b)[1],g=a.parentNode,c=new XMLHttpRequest,l;c.onreadystatechange=function(){4===c.readyState&& l()};l=function(){var b=c.responseText;if(b&&a.parentNode&&(!c.status||400>c.status||600<c.status)){if((b=e.fix(b,!0,a))&&d)var b=b.replace(/url\(\s*?((?:"|‘)?)(.+?)\1\s*?\)/gi,function(b,a,c){return/^([a-z]{3,10}:|#)/i.test(c)?b:/^\/\//.test(c)?‘url("‘+f+c+‘")‘:/^\//.test(c)?‘url("‘+h+c+‘")‘:/^\?/.test(c)?‘url("‘+k+c+‘")‘:‘url("‘+d+c+‘")‘}),n=d.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g,"\\$1"),b=b.replace(RegExp("\\b(behavior:\\s*?url\\(‘?\"?)"+n,"gi"),"$1");n=document.createElement("style");n.textContent= "/*# sourceURL="+a.getAttribute("href")+" */\n/*@ sourceURL="+a.getAttribute("href")+" */\n"+b;n.media=a.media;n.disabled=a.disabled;n.setAttribute("data-href",a.getAttribute("href"));a.id&&(n.id=a.id);g.insertBefore(n,a);g.removeChild(a);n.media=a.media}};try{c.open("GET",b),c.send(null)}catch(p){"undefined"!=typeof XDomainRequest&&(c=new XDomainRequest,c.onerror=c.onprogress=function(){},c.onload=l,c.open("GET",b),c.send(null))}a.setAttribute("data-inprogress","")},styleElement:function(a){if(!a.hasAttribute("data-noprefix")){var b= a.disabled;a.textContent=e.fix(a.textContent,!0,a);a.disabled=b}},styleAttribute:function(a){var b=a.getAttribute("style"),b=e.fix(b,!1,a);a.setAttribute("style",b)},process:function(){m(‘link[rel="stylesheet"]:not([data-inprogress])‘).forEach(StyleFix.link);m("style").forEach(StyleFix.styleElement);m("[style]").forEach(StyleFix.styleAttribute)},register:function(a,b){(e.fixers=e.fixers||[]).splice(void 0===b?e.fixers.length:b,0,a)},fix:function(a,b,d){if(e.fixers)for(var f=0;f<e.fixers.length;f++)a= e.fixers[f](a,b,d)||a;return a},camelCase:function(a){return a.replace(/-([a-z])/g,function(b,a){return a.toUpperCase()}).replace("-","")},deCamelCase:function(a){return a.replace(/[A-Z]/g,function(b){return"-"+b.toLowerCase()})}};(function(){setTimeout(function(){m(‘link[rel="stylesheet"]‘).forEach(StyleFix.link)},10);document.addEventListener("DOMContentLoaded",StyleFix.process,!1)})()}})(); (function(m){function e(b,d,f,h,k){b=a[b];b.length&&(b=RegExp(d+"("+b.join("|")+")"+f,"gi"),k=k.replace(b,h));return k}if(window.StyleFix&&window.getComputedStyle){var a=window.PrefixFree={prefixCSS:function(b,d,f){var h=a.prefix;-1<a.functions.indexOf("linear-gradient")&&(b=b.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig,function(b,a,d,f){return a+(d||"")+"linear-gradient("+(90-f)+"deg"}));b=e("functions","(\\s|:|,)","\\s*\\(","$1"+h+"$2(",b);b=e("keywords","(\\s|:)","(\\s|;|\\}|$)", "$1"+h+"$2$3",b);b=e("properties","(^|\\{|\\s|;)","\\s*:","$1"+h+"$2:",b);if(a.properties.length){var k=RegExp("\\b("+a.properties.join("|")+")(?!:)","gi");b=e("valueProperties","\\b",":(.+?);",function(a){return a.replace(k,h+"$1")},b)}d&&(b=e("selectors","","\\b",a.prefixSelector,b),b=e("atrules","@","\\b","@"+h+"$1",b));b=b.replace(RegExp("-"+h,"g"),"-");return b=b.replace(/-\*-(?=[a-z]+)/gi,a.prefix)},property:function(b){return(0<=a.properties.indexOf(b)?a.prefix:"")+b},value:function(b,d){b= e("functions","(^|\\s|,)","\\s*\\(","$1"+a.prefix+"$2(",b);b=e("keywords","(^|\\s)","(\\s|$)","$1"+a.prefix+"$2$3",b);0<=a.valueProperties.indexOf(d)&&(b=e("properties","(^|\\s|,)","($|\\s|,)","$1"+a.prefix+"$2$3",b));return b},prefixSelector:function(b){return a.selectorMap[b]||b},prefixProperty:function(b,d){var f=a.prefix+b;return d?StyleFix.camelCase(f):f}};(function(){var b={},d=[],f=getComputedStyle(document.documentElement,null),h=document.createElement("div").style,k=function(a){if("-"=== a.charAt(0)){d.push(a);a=a.split("-");var c=a[1];for(b[c]=++b[c]||1;3<a.length;)a.pop(),c=a.join("-"),StyleFix.camelCase(c)in h&&-1===d.indexOf(c)&&d.push(c)}};if(f&&0<f.length)for(var g=0;g<f.length;g++)k(f[g]);else for(var c in f)k(StyleFix.deCamelCase(c));var g=0,e,p;for(p in b)f=b[p],g<f&&(e=p,g=f);a.prefix="-"+e+"-";a.Prefix=StyleFix.camelCase(a.prefix);a.properties=[];for(g=0;g<d.length;g++)c=d[g],0===c.indexOf(a.prefix)&&(e=c.slice(a.prefix.length),StyleFix.camelCase(e)in h||a.properties.push(e)); !("Ms"!=a.Prefix||"transform"in h||"MsTransform"in h)&&"msTransform"in h&&a.properties.push("transform","transform-origin");a.properties.sort()})();(function(){function b(a,b){e[b]="";e[b]=a;return!!e[b]}var d={"linear-gradient":{property:"backgroundImage",params:"red, teal"},calc:{property:"width",params:"1px + 5%"},element:{property:"backgroundImage",params:"#foo"},"cross-fade":{property:"backgroundImage",params:"url(a.png), url(b.png), 50%"}};d["repeating-linear-gradient"]=d["repeating-radial-gradient"]= d["radial-gradient"]=d["linear-gradient"];var f={initial:"color",grab:"cursor",grabbing:"cursor","zoom-in":"cursor","zoom-out":"cursor",box:"display",flexbox:"display","inline-flexbox":"display",flex:"display","inline-flex":"display",grid:"display","inline-grid":"display","max-content":"width","min-content":"width","fit-content":"width","fill-available":"width","contain-floats":"width"};a.functions=[];a.keywords=[];var e=document.createElement("div").style,k;for(k in d){var g=d[k],c=g.property,g= k+"("+g.params+")";!b(g,c)&&b(a.prefix+g,c)&&a.functions.push(k)}for(var l in f)c=f[l],!b(l,c)&&b(a.prefix+l,c)&&a.keywords.push(l)})();(function(){function b(a){h.textContent=a+"{}";return!!h.sheet.cssRules.length}var d={":any-link":null,"::backdrop":null,":fullscreen":null,":full-screen":":fullscreen","::placeholder":null,":placeholder":"::placeholder","::input-placeholder":"::placeholder",":input-placeholder":"::placeholder",":read-only":null,":read-write":null,"::selection":null},e={keyframes:"name", viewport:null,document:‘regexp(".")‘};a.selectors=[];a.selectorMap={};a.atrules=[];var h=m.appendChild(document.createElement("style")),k;for(k in d){var g=d[k]||k,c=k.replace(/::?/,function(b){return b+a.prefix});!b(g)&&b(c)&&(a.selectors.push(g),a.selectorMap[g]=c)}for(var l in e)d=l+" "+(e[l]||""),!b("@"+d)&&b("@"+a.prefix+d)&&a.atrules.push(l);m.removeChild(h)})();a.valueProperties=["transition","transition-property","will-change"];m.className+=" "+a.prefix;StyleFix.register(a.prefixCSS)}})(document.documentElement);
about yudian.js function resizeHook(){ if(ww<=720){ var $bf=$(‘#bg-float‘); $bf.css(‘width‘,ww+‘px‘); var bf_height=ww/720*534; if(wh>$bf.offset().top+bf_height){ $bf.css(‘padding-top‘,wh-$bf.offset().top-bf_height+‘px‘); } } }
一个控制背景的显示公共方法 包括对ie的兼容性
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。