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>
相关推荐
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20155 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录7 小时前
括号生成算法
前端·算法
拾光拾趣录8 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
@大迁世界8 小时前
前端:优秀架构的坟墓
前端·架构
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互