当前位置：首页 > news >正文

利用纯JS开发浏览器小窗口移动广告小功能

news 来源：原创 2025/4/26 20:19:43

效果展示

直接上代码

如果要用到vue项目里面，直接按照vue的写法改动就行，一般没有多大的问题，顶部的占位是我项目需求，你可以按照要求改动。

<!DOCTYPE html>
<html>
<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 type="text/javascript" src="../js/jquery.min.js"></script>
<style>* {margin: 0;box-sizing: border-box;}.zhanwei {width: 100%;height: 160px;border: 1px solid red;}#thediv {width: 137px;height: 177px;display: flex;flex-wrap: wrap;justify-content: center;background-color: white;overflow: hidden;border-radius: 10px;border: 1px solid red;position: absolute;top: 0px;left: 0px;z-index: 1000;}#thediv img {width: 100%;height: 100%;object-fit: cover;}#thediv:hover {cursor: pointer;}.closeButton {width: 25px;height: 25px;font-size: 16px;background-color: rgb(55 55 55 / 27%);color: #ffffff;text-align: center;line-height: 25px;border-radius: 0px 0px 0px 4px;position: absolute;top: 0px;right: 0px;opacity: 0;}
</style>
</head><body><div class="zhanwei">顶部占位ie</div><div id="thediv" ref="thediv"><img src="../images/leader/bg.jpg" alt="" /><div class="closeButton">×</div></div></body>
<script>// $(document).ready(function () {let xPosition =0let yPosition = 0let step = 1let divOffsetH = 0let divOffsetW = 0let yon = 0let xia = 0let setIntervalData = nulllet thediv = document.getElementById('thediv')let topNavH = document.getElementsByClassName('zhanwei')[0].offsetHeight//浏览器窗口的宽度一定要打印出来看看拿到的数值是否正确let width = document.documentElement.clientWidth || document.body.clientWidth;//浏览器窗口的高度一定要打印出来看看拿到的数值是否正确let height = (document.documentElement.clientHeight) - topNavH;// 监听窗口大小变化事件，重新设置大小window.addEventListener('resize', () => {width = document.documentElement.clientWidth || document.body.clientWidth;topNavH = document.getElementsByClassName('zhanwei')[0].offsetHeightheight = (document.documentElement.clientHeight) - topNavH;});function changePos() {// 获取当前对象的高度divOffsetH = thediv.offsetHeight;// 获取当前对象的宽度divOffsetW = thediv.offsetWidth;//document.documentElement.scrollLeft和document.documentElement.scrollTop是浏览器滚动条移动的距离一定要打印出来看看拿到的数值是否正确thediv.style.left = (xPosition + document.documentElement.scrollLeft) + "px";thediv.style.top = topNavH + (yPosition + document.documentElement.scrollTop) + "px";if (yon) {yPosition = yPosition + step;} else {yPosition = yPosition - step;}// 当移动到浏览器边时，重设定位if (yPosition < 0) {yon = 1;yPosition = 0;}if (yPosition >= (height - divOffsetH)) {yon = 0;yPosition = (height - divOffsetH);}if (xia) {xPosition = xPosition + step;} else {xPosition = xPosition - step;}// 当移动到浏览器边时，重设定位if (xPosition < 0) {xia = 1;xPosition = 0;}if (xPosition >= (width - divOffsetW)) {xia = 0;xPosition = (width - divOffsetW);}}// 监听鼠标移入事件thediv.addEventListener('mouseenter', clearFdAd);// 监听鼠标移除事件thediv.addEventListener('mouseleave', starFdAd);// 监听鼠标点击事件document.getElementsByClassName('closeButton')[0].addEventListener('click', function () {close()});//关闭function close() {thediv.style.display = 'none'setTimeout(() => {if (setIntervalData != null) {clearInterval(setIntervalData)setIntervalData = null;}}, 800)}//清楚定时器function clearFdAd() {if (setIntervalData != null) {clearInterval(setIntervalData)setIntervalData = null;}document.getElementsByClassName('closeButton')[0].style.opacity = "1";}//启动定时器function starFdAd() {if (setIntervalData == null) {setIntervalData = setInterval(changePos, 10)}document.getElementsByClassName('closeButton')[0].style.opacity = "0";}setTimeout(() => {starFdAd()})// })
</script></html>