uniapp广告飘窗

html 复制代码
<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>
相关推荐
^Rocky10 分钟前
uniapp 实现腾讯云IM群文件上传下载功能
uni-app·腾讯云
烛阴17 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
Allen Bright18 分钟前
【HTML-16】深入理解HTML中的块元素与行内元素
前端·html
前端卧龙人25 分钟前
受够了webpack的速度,我选择了vite重构vue2项目
前端
巛、32 分钟前
ES6面试题
前端·面试·es6
周全全1 小时前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙1 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
moxiaoran57531 小时前
uni-app学习笔记三十四--刷新和回到顶部的实现
笔记·学习·uni-app
拉不动的猪1 小时前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九2 小时前
html、css(javaweb第一天)
前端·css·html