html pc和移动端共用一个页面，移动端通过缩放达到适配页面，滚动飘窗

pc和移动端共用一个页面

css 复制代码

@media (max-width: 1000px)
body {
    height: 100%;
    position: relative;
}
@media (max-width: 1000px)
#index-P {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    width: 1200px;/*pc端页面内容主体宽度*/
}

javascript 复制代码

<script>
document.addEventListener('DOMContentLoaded', function() {
	const scaledContainer = document.getElementById('index-P');
	function updateScale() {
		const windowWidth = window.innerWidth;
		const containerWidth = 1200; // PC端设计宽度
	
		// 计算缩放比例
		let scale = windowWidth / containerWidth;
	
		// 限制最大缩放比例
		if (scale > 1) scale = 1;
	
		// 应用缩放
		if (scale !== 1) {
			scaledContainer.style.transform = `scale(${scale})`;
		}
	}
	// 初始调用
	updateScale();
	
	// 监听窗口大小变化
	window.addEventListener('resize', updateScale);
	});

</script>

滚动飘窗

css 复制代码

<style>
	#movingBox {
		background: url({$style_path}/img/P/movebg.jpg);
		border-radius: 8px;
		box-shadow: 4px 6px 11px #eeeeee;
	}

	.kuangBtn {
		height: 45px;
		width: 150px;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5px;
		margin: 45px auto 0 auto;
		background-color: #DF4F53;
	}

	.closePiao1 {
		position: absolute;
		right: -16px;
		top: -17px;
	}

	.kuang {
		height: 250px;
		width: 520px;
		background: white;
		padding: 20px;
		font-size: 20px;
		line-height: 29px;
		border-radius: 10px;
		margin: 20px;
	}

	.padding5 {
		padding-left: 5px;
	}

	.kuangleft {
		position: relative;
		top: 18px;
		display: flex;

	}

	.colorBlue {
		color: #DF4F53;
		font-size: 22px;
		margin-left: 5px;
	}

	/* 浮动方块样式 */
	.floating-box {
		width: 560px;
		height: 290px;
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		z-index: 200;
		pointer-events: auto;
	}
</style>

html 复制代码

<div class="floating-box" id="floatingBox">
			<div id="movingBox">
				<div class="closePiao1" id="closePiao1">
		
					<i class="layui-icon layui-icon-close-fill" style="font-size: 30px; color:#cdcdcd; "></i>
				</div>
				<div class="kuang">
					<div class="kuangtop">
						<p>&nbsp;&nbsp;&nbsp;&nbsp;促进招投标流程公开透明化，优化项目流程，推动企业发展，现开展全国优质供应商、分供商入驻平台，引入信息资源库，开办线上登记报名工作。
						</p>
					</div>
					<div class="kuangleft">
						<p>加急办理咨询热线: </p>
						<span class="colorBlue">400 400 2000</span>
					</div>
					<div class="kuangBtn from-box-click">
						<i class="icon-pencil"></i>
						<div class="padding5">立即入驻</div>
					</div>
		
				</div>
			</div>
		</div>

javascript 复制代码

document.addEventListener('DOMContentLoaded', function() {
			var windowWidth = $(window).width();
			if (windowWidth > 1000) {
				const box = document.getElementById('floatingBox');
				const closeBtn = document.getElementById('closePiao1');

				let posX = Math.random() * (window.innerWidth - box.offsetWidth);
				let posY = Math.random() * (window.innerHeight - box.offsetHeight);
				let speed = 1.5; // 初始慢速
				let dx = speed;
				let dy = speed;
				let isPaused = false;
				let isVisible = true;
				let animationId;
				// 关闭/显示按钮功能
				closeBtn.addEventListener('click', function() {
					if (isVisible) {
						// box.style.display = 'none';
						box.remove("floatingBox")
						cancelAnimationFrame(animationId);

					}
					isVisible = !isVisible;
				});

				// 更新方块位置
				function updatePosition() {
					if (isPaused) return;

					posX += dx;
					posY += dy;

					// 边界检测
					if (posX <= 0 || posX >= window.innerWidth - box.offsetWidth) {
						dx = -dx;
						posX = Math.max(0, Math.min(posX, window.innerWidth - box.offsetWidth));
					}

					if (posY <= 0 || posY >= window.innerHeight - box.offsetHeight) {
						dy = -dy;
						posY = Math.max(0, Math.min(posY, window.innerHeight - box.offsetHeight));
					}

					// 应用新位置
					box.style.left = posX + 'px';
					box.style.top = posY + 'px';

					animationId = requestAnimationFrame(updatePosition);
				}

				// 鼠标悬停事件
				box.addEventListener('mouseenter', function() {
					isPaused = true;

					box.classList.add('paused');
				});

				// 鼠标离开事件
				box.addEventListener('mouseleave', function() {
					isPaused = false;

					box.classList.remove('paused');
					cancelAnimationFrame(animationId);
					animationId = requestAnimationFrame(updatePosition);
				});

				// 窗口大小变化时调整方块位置
				window.addEventListener('resize', function() {
					posX = Math.min(posX, window.innerWidth - box.offsetWidth);
					posY = Math.min(posY, window.innerHeight - box.offsetHeight);
				});

				// 初始位置
				box.style.left = posX + 'px';
				box.style.top = posY + 'px';

				// 开始动画
				animationId = requestAnimationFrame(updatePosition);
			}

		});
</script>