先看效果,视频演示地址:https://b23.tv/i8njpo,以下为图片效果。
进入页面后会有一个弹窗,用户点击领取按钮(或是不点击按钮,页面3秒钟后也会分离)后,图片会上下分离滑动至屏幕外,领取按钮托马斯全旋360度后原地消失,同时页面蒙版消失,用户可以进行后续操作。
上面的效果其实比较简单,一个弹窗,包含三个图片,点击中间图片(或是不点击 过三秒后),上下两个图片垂直滑动至屏幕外。要实现这个效果js是比较简单的,复杂的点在于css。
这里两个需要注意的点是:
1:滑动的css属性为:
transform: translateY(-300%); //负数代表上滑,上滑三个百分单位
//translateY:沿Y轴垂直滑动
//translateX:沿X轴水平滑动
//rotateY(360edg): 沿Y轴翻转360度,edg是角度单位
//还有很多类似的取值,可以参考 CSS3 transform 属性
2:js定时器方法:
//setTimeout :在3秒后执行一次,执行一次就不再执行了
setTimeout(function () {
}, 3000);
//setInterval(fn,2500) :每2.5秒重复执行一次
var stopInterval = setInterval(function () {
if(true){
//clearInterval(obj) :取消重复循环定时器
clearInterval(stopInterval);
}
}, 2500)
}
3:active的一个小小的注意点
/*给class添加动态的active样式,在定义样式的时候一定要将active紧跟class名称,不能留空格
因为空格后面的就是下层class名称,加上空格后页面会去找寻下层中名叫active的class去了,那肯定是找不
到的
*/
//举例:错误的写法(2种)
.hoZrDV .modal-packet. active .modal-packet-top {
xxx:xxx
}
.hoZrDV .modal-packet active .modal-packet-top {
xxx:xxx
}
//举例:正确的写法
.hoZrDV .modal-packet.active .modal-packet-top {
xxx:xxx
}
以下为主要代码
1:弹窗及蒙版的div。代码中的图片地址为假地址,可以自己换图片,如果需要可以私信我。
<!--有关蒙版+弹窗这块的最外层div-->
<div class="hoZrDV" id="hoZrDV">
<!--这个是蒙版-->
<div class="rps-mask" id="rps-mask"></div>
<!--弹窗-->
<div class="modal-packet" id="modal-packet">
<!--弹窗上半部分的图片-->
<div class="modal-packet-top" id="modal-packet-top"
style="background-image:url(https://xxx.com/activities/images/test/top.png)"></div>
<!--弹窗下半部分的图片-->
<div class="modal-packet-bottom" id="modal-packet-bottom"
style="background-image:url(https://xxx.com/activities/images/test/bottom.png)"></div>
<!--弹窗中间部分的图片,就是领取按钮-->
<img class="modal-packet-btn" id="formButton" src="https://xxx.com/activities/images/test/getnow.png" alt=""/>
</div>
</div>
2:弹窗及蒙版的css
.hoZrDV .rps-mask {
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.7
}
.hoZrDV .modal-packet{
position: fixed;
z-index: 1001;
top: 50%;
left: 50%;
width: 345px;
height: 380px;
max-width: 100vw;
max-height: 100vh;
transform: translate(-50%, -50%)
}
.hoZrDV .modal-packet-top {
position: absolute;
width: 100%;
height: 83%;
left: 0;
top: 0;
background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/top2.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center top;
-webkit-transition: -webkit-transform 0.8s ease 0.5s;
-webkit-transition: transform 0.8s ease 0.5s;
transition: transform 0.8s ease 0.5s;
z-index: 2;
}
.hoZrDV .modal-packet-bottom {
height: 44.5%;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background-image: url(https://oss-baoji.oss-cn-shanghai.aliyuncs.com/activities/images/test/bottom2.png);
background-size: 100%;
background-repeat: no-repeat;
background-position: center bottom;
-webkit-transition: -webkit-transform 0.8s ease 0.5s;
-webkit-transition: transform 0.8s ease 0.5s;
transition: transform 0.8s ease 0.5s;
}
.hoZrDV .modal-packet-btn {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
bottom: 30px;
-webkit-transition: -webkit-transform 0.5s ease;
-webkit-transition: transform 0.5s ease;
transition: transform 0.5s ease;
z-index: 2;
bottom: 32px;
width: 100px;
height: 100px;
margin-left: -50px
}
/*---------------以上为页面刚加载完的未分离时的样式--------------------*/
/*---------------以下为点击领取后触发的分离特效的样式--------------------*/
/*隐藏蒙版*/
.hoZrDV .rps-mask.active {
opacity: 0.5;
}
/*隐藏弹窗*/
.hoZrDV .modal-packet .hide {
display: none;
}
/*上半部图片上滑出屏幕特效*/
.hoZrDV .modal-packet.active .modal-packet-top {
-webkit-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
/*下半部图片下滑出屏幕特效*/
.hoZrDV .modal-packet.active .modal-packet-bottom {
-webkit-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}
/*领取按钮翻转360度特效*/
.hoZrDV .modal-packet-btn.active {
-webkit-transform: rotateY(360deg);
-ms-transform: rotateY(360deg);
transform: rotateY(360deg);
}
3:弹窗及蒙版的jquery
/*setTimeout 在页面加载完3秒后执行一次(旨在即使用户不点击,时间一到也会分离),增加分离特效样式,此样式会将蒙版的透明度由0.7改为0.5*/
function splitSetTimeout() {
setTimeout(function () {
$("#modal-packet").addClass("active");
$("#formButton").addClass("active");
$("#rps-mask").addClass("active");
}, 3000);
}
/*弹窗领取按钮被点击的方法
* 点击后给蒙版rps-mask添加上active样式,增加分离特效样式,此样式会将蒙版的透明度由0.7改为0.5*/
function splitFormButtonClike() {
$("#formButton").click(function (){
$("#modal-packet").addClass("active");
$("#formButton").addClass("active");
$("#rps-mask").addClass("active");
});
}
/*每2.5秒重复执行一次*/
function splitStopInterval() {
var stopInterval = setInterval(function () {
/*检测蒙版的透明度是否为0.5,为0.5即表示用户点击了领取按钮 或是 页面加载了3秒钟,
此时将一系列的弹窗样式清楚或是不展示,并取消重复执行*/
if ($('#rps-mask').css('opacity') == '0.5') {
$("#hoZrDV").removeClass();
$("#hoZrDV").css("display", "none");
$("#modal-packet").css("display", "none");
$("#formButton").css("display", "none");
$("#rps-mask").css("opacity", "0");
$("#rps-mask").css("display", "none");
/*取消重复执行*/
clearInterval(stopInterval);
}
}, 2500)
}