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

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

　　HTML页面结构大概是这样子的：

  <main class="mobileBox"><div class="imgBox"><img src="./images/bg1.jpg" class="imgItem" alt="" srcset=""><img src="./images/bg2.jpg" class="imgItem" alt="" srcset=""><img src="./images/bg3.jpg" class="imgItem" alt="" srcset=""><img src="./images/bg4.jpg" class="imgItem" alt="" srcset=""><img src="./images/bg5.jpg" class="imgItem" alt="" 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);
};

　　怎么样，很简单吧。

转载于:https://www.cnblogs.com/goodearth/p/8684526.html

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

uniapp实现顶部导航栏背景图片渐隐渐现效果
由于项目需要一个功能,顶部距离小于50rpx时,导航栏透明显示:当滚动页面时,导航栏不再透明显示. 实现思路: 如果滑动位置距离顶部<=50的话,隐藏导航栏: 50 < 距离顶部距离 &l ...
android 边框渐隐动画,Android开启动画之渐隐渐现效果
启动某项程序时我们往往都能看到不同的"开机动画",千变万化的动画也只不过是四种基本动画衍变美化而成的. 四种android动画效果: alpha 渐变透明度动画效果 ...
html图片渐隐渐显,js实现图片切换效果渐隐渐显
图片渐隐渐显的切换效果 window.onload = function() { var testDiv = document.getElementById('test'); testDiv.styl ...
html5 加速球效果,css 渐隐渐现、echarts 圆环图、百度地图覆盖物、echarts水球图（360加速球效果）...
说一下知识点: 1.水球是echarts的插件echarts-liquidfill,官网下载-扩展下载中可以拿到,git传送阵https://github.com/ecomfe/echarts-liq ...
模仿豌豆荚以及某些刷机软件获取手机屏幕图片
昨天花了一下午研究了下系统截屏,可行的方案有俩: 1.手机端:读取/dev/graphics/fb0文件,该文件存储了当前屏幕画面的数据,将此数据转换成图片存储在手机端即可.但美中不足的是需要获取系统 ...
单片机模拟手机屏幕亮度调节功能
概括: 通过运用AD/DA转换芯片来输出电压控制LED灯的亮度,实现在较暗环境下LED灯亮度偏弱,在较亮环境下LED灯亮度偏强的效果.用到的核心模块为XPT2046芯片,通过PWM波的调控来实现上述效 ...
Unity3D--击毙怪物文本提示及其带声音（文本渐隐渐现）
Unity3D–击毙怪物文本提示(文本渐隐渐现) 1:成员变量 public Text hintText; public AudioClip FirstBlood;//一杀声音 public Audi ...
html鼠标感应图片,jQuery实现的感应鼠标悬停图片色彩渐显效果
本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: 超个性的感应鼠标悬停图片色彩渐显效果 ul.gallery { width: 750px; /* ...
使用手机拍照图片翻译英文的效果不好？或许你可以试试这几款软件
这篇文章解决你使用手机拍照图片翻译英文的效果不好的烦恼前段时间我在国外旅游,当我准备规划下一步去哪个地方时,我发现手里只有一张纸质地图,上面密密麻麻地标注着各种外语信息.我拿出手机,准备使用拍照翻译 ...

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

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

最新文章

热门文章