原生JS怎么实现MUI导航栏透明渐变效果-创新互联
这篇文章主要介绍原生JS怎么实现 MUI导航栏透明渐变效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联是一家集网站建设,华容企业网站建设,华容品牌网站建设,网站定制,华容网站建设报价,网络营销,网络优化,华容网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。js有什么特点
1、js属于一种解释性脚本语言;2、在绝大多数浏览器的支持下,js可以在多种平台下运行,拥有着跨平台特性;3、js属于一种弱类型脚本语言,对使用的数据类型未做出严格的要求,能够进行类型转换,简单又容易上手;4、js语言安全性高,只能通过浏览器实现信息浏览或动态交互,从而有效地防止数据的丢失;5、基于对象的脚本语言,js不仅可以创建对象,也能使用现有的对象。
mui内置有H5版本的透明渐变导航控件,教程参考mui官网;透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果;
首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器
css代码
body,p,h2{margin: 0;} .module-layer{ width: 100%; position: fixed; top: 0; left: 0; z-index: 100000; } .module-layer-content{ position: relative; min-width: 320px; max-width: 750px; width: 100%; margin: 0 auto; background-color: rgba(255, 0, 0, 0.9); } .module-layer-bg{ width: 100%; height: 100%; background: #000; opacity: .7; position: absolute; top: 0; left: 0; z-index: -1; } .layer-head-name{ height: 50px; line-height: 50px; text-align: center; padding: 0 50px; font-size: 20px; } .layer-return,.layer-share{ width: 50px; height: 50px; line-height: 50px; text-align: center; position: absolute; top:0; z-index: 1; } .layer-return{left: 0;} .layer-share{right: 0;} .fixed-layer{ height: 100%; display: none; z-index: 100001; } .relative-layer{height: 100%;} .layer-content{ padding:3%; position: relative; top: 20%; } .layer-close{ width: 2rem; height: 2rem; position: absolute; top:3%; right: 3%; } .pr { position:relative; } #shop-input::-webkit-input-placeholder { color:#fff; } #shop-input:-moz-placeholder { color:#fff; } #shop-input::-moz-placeholder { color:#fff; } #shop-input:-ms-input-placeholder { color:#fff; } #shop-input { border:none; outline:none; background:transparent; } .search-box { height:30px; border-radius:20px; top:10px; overflow:hidden; z-index:10; } .search-box:after { content:''; display:block; width:100%; height:30px; background:#fff; opacity:.5; position:absolute; top:0; left:0px; z-index:-1; } #shop-input { height:28px; line-height:28px; font-size:16px; position:absolute; top:0; left:30px; } .shop-search { width:16px; height:16px; position:absolute; top:7px; left:6px; } .layer-return{ background: url(images/return.png) no-repeat center center/12px 20px; } .layer-share{ background: url(images/share.png) no-repeat center center/20px 30px; } a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; } .module-content{ min-width: 320px; max-width: 750px; width: 100%; margin: 0 auto; background: #fff; } .module-content div:first-child img{margin-top: 0;} .module-content div img{ display: block; width: 100%; margin-top: 10px; }
HTML代码
JS代码
(function(){ //获取滚动条当前位置 function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body){ bodyScrollTop = document.body.scrollTop; } if(document.documentElement){ documentScrollTop = document.documentElement.scrollTop; } scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop; return scrollTop; } //获取CSS样式 function getStyle(element, attr){ if(element.currentStyle){ return element.currentStyle[attr]; }else{ return window.getComputedStyle(element,null)[attr]; } } //获取原始backgroundColor值 var color = getStyle(document.getElementsByClassName('module-layer-content')[0],'backgroundColor'); //取到RGB var colorRgb = color.substring(0,color.lastIndexOf(',') + 1); //取到A var colorA = color.substring(color.lastIndexOf(',') + 1,color.length - 1); //对A判断,如果最终值小于0.9,直接设置为1 if(colorA < 0.9){colorA = 1;} //设置背景色的A的函数 var setCoverOpacity = function() { document.getElementsByClassName('module-layer-content')[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')'; } //初始化函数 setCoverOpacity(); //绑定滚动监听事件 window.addEventListener('scroll',setCoverOpacity,false); }())
注意:
不兼容IE8及以下的IE浏览器;
550是滚动条到达位置的最终透明度,此处根据需要自定义;
CSS终背景颜色的RGBA的A是最终透明度
以上是“原生JS怎么实现 MUI导航栏透明渐变效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享题目:原生JS怎么实现MUI导航栏透明渐变效果-创新互联
文章转载:http://ybzwz.com/article/dcjcsh.html