JAVA制作弹出小广告的程序_微信小程序实现首页弹出广告

本文实例为大家分享了微信小程序实现首页弹出广告的具体代码，供大家参考，具体内容如下

这个微信小程序首页广告demo

仅供有需要的参考

.wxml

this is ad

//事件 catchtouchmove方法主要作用是固定广告防止点击穿透，就是使用弹出广告的后面内容不能上下拉动。其中对应的.js方法可以不做任何处理。此处只能在真机上看到实际效果，在电脑上不能。并且此方法要放到广告view最外层

.wxss

.bg{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 990;

background-color:rgb(180, 180, 180);

opacity: 0.5;

}

.active{

width: 80%;

height:80%;

background-color: #fff;

position: absolute;

top:10%;

left:50%;

transform: translate(-50%);

z-index: 992;

}

.active-sport{

animation: sport 1.5s linear 1;

}

@keyframes sport{

from{ transform:rotate(0deg) skew(-10deg) scale(2.0) translate(-100%,0)}

to{ transform:rotate(360deg) skew(0deg) scale(1.0) translate(-50%,0)}

}

.active-content{

width: 80%;

height:80%;

background-color: blue ;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

text-align: center;

}

.active-img{

width: 100%;

}

.cancel{

backgrou