uniapp广告飘窗

<template>
<view>
<view id="floatingImg" class="float-btn" :style="{ position: 'absolute', left: imgX + 'px', top: imgY + 'px' }"
@mouseover="stopFloat" @mouseout="startFloat">
<view class="">
我要
</view>
<view class="">
评价
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
imgX: 50,
imgY: 60,
step: 1,
delay: 10,
xin: true,
yin: true,
interval: null,
};
},
mounted() {
this.startFloat();
},
methods: {
float() {
const L = 0;
const T = 0;
const R = uni.getSystemInfoSync().windowWidth - 80; // 50为图片宽度
const B = uni.getSystemInfoSync().windowHeight - 80; // 50为图片高度

this.imgX += this.step * (this.xin ? 1 : -1);
this.imgY += this.step * (this.yin ? 1 : -1);

if (this.imgX < L) {
this.xin = true;
this.imgX = L;
}
if (this.imgX > R) {
this.xin = false;
this.imgX = R;
}
if (this.imgY < T) {
this.yin = true;
this.imgY = T;
}
if (this.imgY > B) {
this.yin = false;
this.imgY = B;
}
},
startFloat() {
this.interval = setInterval(this.float, this.delay);
},
stopFloat() {
clearInterval(this.interval);
},
},
};
</script>

<style scoped>
/* 可以根据需要添加样式 */
.float-btn {
// width: 100rpx;
height: 100rpx;
text-align: center;
letter-spacing: 6px;
font-weight: 900;
padding: 10px 5px 5px 11px;
font-size: 18px;
color: rgb(220, 2, 2);
// line-height: 140rpx;

background: #fff;
box-shadow: 3rpx 4rpx 8rpx 4rpx rgba(231, 68, 52, 0.54);
border-radius: 4px;
position: fixed;
}
</style>

原文地址：https://blog.csdn.net/m0_52769924/article/details/145287852

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！