原生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 For Beginners(转载)
Jan 05 Javascript
js获得当前时区夏令时发生和终止的时间代码
Feb 23 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
JavaScript高级程序设计(第三版)学习笔记1~5章
Mar 11 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
微信小程序 图片宽高自适应详解
May 11 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
vue与bootstrap实现简单用户信息添加删除功能
Feb 15 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
使用URL传输SESSION信息
2015/07/14 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
js 分栏效果实现代码
2009/08/29 Javascript
利用jquery的获取JS文件中的字符串内容
2012/02/14 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
浅谈JavaScript变量的自动转换和语句
2016/06/12 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python @property及getter setter原理详解
2020/03/31 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python实现经典排序算法的示例代码
2021/02/07 Python
小区门卫岗位职责
2013/12/31 职场文书
网络技术专业推荐信
2014/02/20 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
大型演出策划方案
2014/05/28 职场文书
党的群众路线对照检查材料
2014/08/27 职场文书
2014年教务处工作总结
2014/12/03 职场文书
会议欢迎词
2015/01/23 职场文书
团代会邀请函
2015/02/02 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书