原生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 相关文章推荐
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
Mar 07 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
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
Js放到HTML文件中的哪个位置有什么区别
2013/08/21 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
python getopt详解及简单实例
2016/12/30 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python实现列表的排序方法分享
2019/07/01 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python整数与Numpy数据溢出问题解决
2019/09/11 Python
python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例
2020/02/27 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
私有程序集与共享程序集有什么区别
2013/04/05 面试题
可贵的沉默教学反思
2014/02/06 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
学校个人对照检查材料
2014/08/26 职场文书
初中学习计划书范文
2014/09/15 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
MySQL系列之十 MySQL事务隔离实现并发控制
2021/07/02 MySQL
MySQL插入数据与查询数据
2022/03/25 MySQL