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>
相关推荐
前端_学习之路1 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_1 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
2501_915918411 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui