用js设计一个带有漂浮广告效果的个人介绍主页，点击广告可以跳转页面

好的，以下是一个简单的实现方式： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人介绍主页</title> <style> body { margin: 0; padding: 0; overflow: hidden; } #adContainer { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: #ccc; } #adContainer a { display: block; width: 100%; height: 100%; } #adContainer img { width: 100%; height: 100%; } </style> </head> <body> <div id="adContainer"> <a href="http://www.example.com"> <img src="ad.jpg" alt="广告图片"> </a> </div> <script src="main.js"></script> </body> </html> ``` JS部分： ```js // 获取广告容器和广告图片 const adContainer = document.getElementById('adContainer'); const adImg = adContainer.querySelector('img'); // 设置广告图片初始位置 let adTop = -adContainer.offsetHeight; let adLeft = Math.random() * (window.innerWidth - adContainer.offsetWidth); adImg.style.top = adTop + 'px'; adImg.style.left = adLeft + 'px'; // 定时器，每隔一定时间移动广告图片 setInterval(() => { adTop += 1; adImg.style.top = adTop + 'px'; if (adTop > window.innerHeight) { // 广告图片超出屏幕，重置位置 adTop = -adContainer.offsetHeight; adLeft = Math.random() * (window.innerWidth - adContainer.offsetWidth); adImg.style.top = adTop + 'px'; adImg.style.left = adLeft + 'px'; } }, 10); ``` 解释一下代码： 1. 在 HTML 中，我们使用绝对定位将广告容器放在页面中心。容器里面包含一个带有链接的图片。 2. 在 JS 中，我们使用 `setInterval` 来定时移动广告图片。每次移动时，我们将广告图片的 `top` 值增加 1，也就是向下移动 1 像素。如果广告图片超出了屏幕，我们将其 `top` 和 `left` 值重置，让它重新回到屏幕上方，同时随机设置一个新的 `left` 值，让它在屏幕中随机出现。这样，我们就实现了一个带有漂浮广告效果的个人介绍主页。点击广告可以跳转页面，因为我们在 HTML 中使用了一个链接包裹了广告图片。

阅读全文

用js设计一个带有漂浮广告效果的个人介绍主页，点击广告可以跳转页面

最新推荐

【VRP】遗传算法求解出租车网约车接送客车辆路径规划问题【含Matlab仿真 2153期】.zip

医用废料检测识别针头针管血渍手术刀等 yolov5标记

java调用comfyui接口

基于Python socket tcp通信，使用tkinter做客户端界面 资料齐全+详细文档.zip

【BAS三维路径规划】蚁群算法结合天牛须算法农用无人机三维路径规划【含Matlab仿真 2341期】.zip

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具

基于Python socket tcp通信，使用tkinter做客户端界面资料齐全+详细文档.zip