如何只使用HTML+CSS实现图片在页面上自由浮动,碰到页面边界后反弹,遇鼠标悬浮时停止浮动,点击“关闭”后隐藏
2条回答 默认 最新
关注
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> --> <title>document</title> <style type="text/css"> #div1 { width: 300px; height: 300px; padding: 0; margin: 0; position: fixed; left: 0; top: 0; } #div1 img { width: 300px; height: 300px; } </style> </head> <body> <div id="div1"> <img id="ad" src="1.png" alt="" /> <button onclick="closeAd()">关闭</button> </div> <script type="text/javascript"> // 参考来源: https://blog.csdn.net/zxh996/article/details/118655180 window.onload = function () { //获取元素 var div1 = document.getElementById("div1"); var w = document.documentElement.clientWidth; var h = document.documentElement.clientHeight; var gox = 1; var goy = 1; //广告漂浮 function move() { var x = div1.offsetLeft; var y = div1.offsetTop; if (x > w - 300 || x < 0) gox = -gox; div1.style.left = x + 10 * gox + "px"; if (y > h - 300 || y < 0) goy = -goy; div1.style.top = y + 10 * goy + "px"; } //漂浮定时器 var timer = setInterval(move, 30); //移入移出时广告的浮动 div1.onmouseover = function () { clearInterval(timer); }; div1.onmouseout = function () { timer = setInterval(move, 30); }; //点击一次跳转到另一个页面,点击两次广告消失 ad.onclick = function () { var neww = window.open("_blank"); neww.location = "http://www.baidu.com"; }; }; function closeAd() { var div1 = document.getElementById("div1"); div1.style.display = "none"; } </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 关于网上一个easyx制作的见缝插针小游戏(c++)
- ¥15 开地址法双散列函数处理碰撞
- ¥15 想问一下这个是什么情况 虚拟机Linux打不开了
- ¥15 联通光猫掉注册了怎么重新注册上去
- ¥15 关于unity开发steamvr程序遇到的问题
- ¥60 求tc downloader的下载方式
- ¥15 华为 快捷方式 手电筒 接口
- ¥15 Qt6.5支不支持Android13开发啊
- ¥20 网络只能跑一半,应该如何设置
- ¥20 Python调用百度开发者平台人脸识别接口