原生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的地址栏射击游戏代码
Mar 10 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
Jan 26 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
Nov 02 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
微信小程序实现折叠与展开文章功能
Jun 12 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
javascript canvas实现雨滴效果
Jun 09 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
ThinkPHP实现事务回滚示例代码
2014/06/23 PHP
thinkphp3.2实现上传图片的控制器方法
2016/04/28 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
用javascript实现在小方框中浏览大图的代码
2007/08/14 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
BootStrap Table对前台页面表格的支持实例讲解
2016/12/22 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python中文件遍历的两种方法
2014/06/16 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python可变参数*args和**kwargs用法实例小结
2018/04/27 Python
Python中的Numpy矩阵操作
2018/08/12 Python
python爬虫开发之Request模块从安装到详细使用方法与实例全解
2020/03/09 Python
python实现程序重启和系统重启方式
2020/04/16 Python
Python如何读取、写入CSV数据
2020/07/28 Python
基于Python实现天天酷跑功能
2021/01/06 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
机械专业应届生求职信
2013/09/21 职场文书
高一自我鉴定
2013/12/17 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年中班下学期工作总结
2014/12/11 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
教师节晚会主持词
2015/06/30 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Oracle创建只读账号的详细步骤
2021/06/07 Oracle