左上方漂浮到右下方代码

时间：2024-10-28 14:25:54 来源：作者：

2025年初级会计职称辅导招生方案

<!DOCTYPE html>
<html lang="en">
<head>
<style>
#floating-ad {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: auto;
background-color: red(0, 0, 0, 0.7); /* 背景颜色改为透明 */
color: #ffffff;
padding: 20px;
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, 0.5); /* 添加边框以增强可见性 */
}

#floating-ad img {
width: 100%;
height: auto;
}

#close-button {
background-color: rgba(255, 77, 77, 0.8); /* 半透明红色背景 */
color: #ffffff;
padding: 10px 15px; /* 增加内边距 */
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px; /* 增加字体大小 */
width: 100%; /* 按钮宽度为100% */
text-align: center; /* 文本居中 */
}

#close-button:hover {
background-color: rgba(255, 26, 26, 0.8); /* 悬停时变深 */
}
</style>
</head>
<body>

<div id="floating-ad">
<div>
<p>
<a href="http://union.chinaacc.com/union/advertHit/advertHit.shtm?agentID=5266&advertID=3027&siteID=1&toUrl=https%3A%2F%2Fwww.chinaacc.com%2Fzhuanti%2F1111" target="_blank">
<img src="https://www.chinaacc.com/upload/resources/image/2024/10/25/2406972.png" alt="广告图片">
</a>
</p>
<button id="close-button" onclick="closeFloatingAd()">关闭广告</button>
</div>
</div>

<script>
var floatingAd = document.getElementById('floating-ad');
var directionX = 1; // 水平方向
var directionY = 1; // 垂直方向
var speed = 0.5; // 移动速度
var currentX = 0; // 当前X坐标
var currentY = 0; // 当前Y坐标

function closeFloatingAd() {
floatingAd.style.display = 'none';
}

function moveFloatingAd() {
var maxX = window.innerWidth - floatingAd.clientWidth; // 右边界
var maxY = window.innerHeight - floatingAd.clientHeight; // 下边界

// 碰撞检测与反弹
if (currentX + speed * directionX > maxX || currentX + speed * directionX < 0) {
directionX *= -1; // 反转X方向
}

if (currentY + speed * directionY > maxY || currentY + speed * directionY < 0) {
directionY *= -1; // 反转Y方向
}

// 更新位置
currentX += speed * directionX;
currentY += speed * directionY;
floatingAd.style.transform = 'translate(' + currentX + 'px, ' + currentY + 'px)';
}

function animate() {
moveFloatingAd();
requestAnimationFrame(animate); // 递归调用
}

// 启动动画
animate();
</script>

</body>
</html>

来顶一下

返回首页

推荐资讯

2024小微企业所得税优	全国各地电子税务局网
电子税务局进项发票勾	全国工会预决算编报网

相关文章

餐饮企业如何办理法人代码证及税务登记

栏目更新

栏目热门