原生JS实现 MUI导航栏透明渐变效果


Posted in Javascript onNovember 07, 2017

mui内置有H5版本的透明渐变导航控件,教程参考mui官网;透明渐变导航是一种解决滚动条通顶的变通方案,相比双webview,具有更高的性能和更好的动画效果;

下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果,具体内容详情如下所示:

首先声明:由于backgroundColor的值采用的是RGBA,IE8及以下不支持,所以此效果不支持IE8及以下的浏览器

css代码

body,p,h1{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代码

<header class="module-layer">
  <div class="module-layer-content">
    <p class="layer-return"></p>
    <h1 class="layer-head-name">
      <div class="pr search-box">
        <img class="shop-search" src="images/search.png"/>
        <input id="shop-input" type="text" placeholder="搜索店内商品" value="" />
      </div>
    </h1>
    <p class="layer-share"></p>
  </div>
</header>
<div class="module-content">
  <div><img src="images/banner.png"/></div> 
  <div><img src="images/banner1.png"/></div> 
  <div><img src="images/banner3.png"/></div>
  <div><img src="images/banner4.jpg"/></div>
  <div><img src="images/banner5.png"/></div>
  <div><img src="images/banner6.png"/></div>
  <div><img src="images/banner7.jpg"/></div>
  <div><img src="images/banner8.jpg"/></div>
</div>

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导航栏透明渐变效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
Js表格万条数据瞬间加载实现代码
Feb 20 Javascript
jquery判断浏览器后退时候弹出消息的方法
Aug 11 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
Mar 03 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
javascript每日必学之封装
Feb 23 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
解析js如何获取css样式
Dec 11 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
详解iframe跨域的几种常用方法(小结)
Apr 29 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
vue中SPA单页面应用程序详解
Nov 07 #Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
You might like
session在PHP大型web应用中的使用
2011/06/25 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
ext实现完整的登录代码
2008/08/08 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
jquery显示和隐藏div特效实例
2013/02/27 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python中多个数组行合并及列合并的方法总结
2018/04/12 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
门卫工作岗位职责
2013/12/17 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
患者身份识别制度
2015/08/06 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书