JS는 MUI 탐색 모음 투명 그라데이션 효과를 구현합니다.

mui에는 투명한 그라데이션 탐색 컨트롤의 H5 버전이 내장되어 있습니다. 튜토리얼을 보려면 mui 공식 웹사이트를 참조하세요. 투명 그라데이션 탐색은 듀얼 웹뷰에 비해 스크롤 막대가 위로 올라가는 문제를 해결하는 방법입니다. 더 높은 성능과 더 나은 애니메이션 효과를 제공합니다.

다음 문서에서는 기본 JS를 기반으로 MUI 탐색 모음 투명 그라데이션 효과를 구현하는 방법을 설명합니다.

우선 선언합니다. backgroundColor 값은 RGBA를 사용하는데, IE8 이하는 지원하지 않으므로 이 효과가 작동하지 않습니다. IE8 이하 지원 브라우저

css code

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 p:first-child img{margin-top: 0;}
.module-content p img{
  display: block;
  width: 100%;
  margin-top: 10px;
}

HTML code

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

JS code

(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(&#39;module-layer-content&#39;)[0].style.background = colorRgb + (((getScrollTop() / 550) > colorA) ? colorA : (getScrollTop() / 550)) + ')';
  }
  //初始化函数
  setCoverOpacity();
  //绑定滚动监听事件
  window.addEventListener('scroll',setCoverOpacity,false);
}())

참고:

호환되지 않음 IE8 이하;

550은 스크롤 막대 위치의 최종 투명도입니다. 필요에 따라 여기에서 사용자 정의하세요.

CSS 최종 배경색의 RGBA가 최종 투명도입니다.

관련 권장 사항:

샘플 코드 아름다운 개인화 된 내비게이션 바 공중제비 구름 효과를 구현하는 JavaScript

내비게이션 바 링크 구현 방법 클릭하면 새 페이지의 해당 링크에 점프하고 색상을 추가할 수 있습니다

3차원 만들기 구현 방법 소개 CSS

를 사용한 탐색 모음

위 내용은 JS는 MUI 탐색 모음 투명 그라데이션 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!