如何只使用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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报