前端模拟手机屏幕图片渐隐渐现效果实现

Posted goodearth

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端模拟手机屏幕图片渐隐渐现效果实现相关的知识,希望对你有一定的参考价值。

  在网站上,我们经常会看到这样的效果,有一个IphoneX的手机屏幕,然后屏幕上会像真的一样,会出现各种动画效果,譬如图片的渐隐渐现。今天我们就尝试做一个这样的效果。

技术分享图片

  html页面结构大概是这样子的:

  <main class="mobileBox">
    <div class="imgBox">
      <img src="./images/bg1.jpg" class="imgItem"  srcset="">
      <img src="./images/bg2.jpg" class="imgItem"  srcset="">
      <img src="./images/bg3.jpg" class="imgItem"  srcset="">
      <img src="./images/bg4.jpg" class="imgItem"  srcset="">
      <img src="./images/bg5.jpg" class="imgItem"  srcset="">
    </div>
  </main>

  其实很简单,就是外边一个box,我们把她的背景设置为手机的图片,里边的imgBox,用来存放图片,图片用absote定位,这样几张图片就重合在一起,然后我们通过改变图片的opaticy和z-index,就可以实现预期效果。

  CSS代码长这样

.mobileBox {
  width: 454px;
  height: 618px;
  background-image: url(../images/mobile.png);
  background-size: 454px 618px;
  background-position: 0 0;
  position: relative;
}
.imgBox {
  padding: 99px 0 0 151px;
  position: relative;
}
.imgItem {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

.show,
.opacityTrans {
  opacity: 1;
  visibility: visible;
}
.opacityTrans {
  -webkit-transition: opacity 1.5s ease-in;
  transition: opacity 1.5s ease-in;
  z-index: 2;
}

  我们就是通过改变图片元素的类名来实现效果切换的。同一时刻,有且只有一张图片的类是.show ,有且只有一张图片的类是.opacityTrans .

  JS代码长这样。

  

window.onload = function() {
  var imgItems = document.querySelectorAll(".imgItem");
  var index = 0;
  var tem = 1;
//我们定义两个变量,来控制show和opacityTrans类的交替,开始时,第一张显示,第二张慢慢出现。 imgItems[index].classList.add("show"); imgItems[tem].classList.add("opacityTrans");
//定时器代码 setInterval(function() { imgItems[index].classList.remove("show"); imgItems[tem].classList.remove("opacityTrans"); index++; tem++;
//当达到最后一张时,边界条件设置:回到第一张。总体就是从第0张到第imgItems.length - 1张,循环,所以我们用两个变量,使逻辑更清晰。 if(tem === 5){ tem = 0; }; if(index === 5){ index = 0; } imgItems[index].classList.add("show"); imgItems[tem].classList.add("opacityTrans"); }, 2000); };

  怎么样,很简单吧。

 




以上是关于前端模拟手机屏幕图片渐隐渐现效果实现的主要内容,如果未能解决你的问题,请参考以下文章

虚拟仿真Unity3D中模型的渐隐渐现效果实现

虚拟仿真Unity3D中模型的渐隐渐现效果实现

在Unity5中使用C#脚本实现UI的下滑变色渐隐渐现效果

Unity3D中UGUI不使用DOTween制作渐隐渐现效果

js学习总结----轮播图之渐隐渐现版

iOS 实现简单的毛玻璃效果