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>
相关推荐
草莓熊Lotso30 分钟前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
JS.Huang35 分钟前
【JavaScript】原生函数
开发语言·javascript·ecmascript
Olrookie42 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
故事与他6452 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
ftpeak2 小时前
JavaScript性能优化实战
开发语言·javascript·性能优化
莫的感情2 小时前
下载按钮点击一次却下载两个文件问题
前端
一个很帅的帅哥2 小时前
JavaScript事件循环
开发语言·前端·javascript
小宁爱Python3 小时前
Django Web 开发系列(二):视图进阶、快捷函数与请求响应处理
前端·django·sqlite
fox_3 小时前
深入理解React中的不可变性:原理、价值与实践
前端·react.js