原生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脚本实现静态网页加密实例代码
Nov 05 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
在Node.js应用中读写Redis数据库的简单方法
Jun 30 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
canvas实现钟表效果
Feb 13 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
微信小程序语音同步智能识别的实现案例代码解析
May 29 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
长波有什么东西
2021/03/01 无线电
如何给phpadmin一个保护
2006/10/09 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
微信推送功能实现方式图文详解
2019/07/12 PHP
新浪的图片新闻效果
2007/01/13 Javascript
javascript 可以拖动的DIV(二)
2009/06/26 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
Vue2.0 组件传值通讯的示例代码
2017/08/01 Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
2018/05/17 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python实现桌面壁纸切换功能
2019/01/21 Python
python的range和linspace使用详解
2019/11/27 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
python 5个实用的技巧
2020/09/27 Python
Python实现微信表情包炸群功能
2021/01/28 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
2017/07/31 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
如何定义一个可复用的服务
2014/09/30 面试题
双十佳事迹材料
2014/01/29 职场文书
工程开工庆典邀请函
2014/02/01 职场文书
求职个人评价范文
2014/04/09 职场文书
向国旗敬礼活动总结范文2014
2014/09/27 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2015年党性分析材料
2014/12/19 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
Java中常用解析工具jackson及fastjson的使用
2021/06/28 Java/Android
Python自动化实战之接口请求的实现
2022/05/30 Python