利用纯JS开发浏览器小窗口移动广告小功能
效果展示https://i-blog.csdnimg.cn/direct/579f1d54eb884b49a9a4d5de99764f6c.gif
直接上代码
假如要用到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 =0
let yPosition = 0
let step = 1
let divOffsetH = 0
let divOffsetW = 0
let yon = 0
let xia = 0
let setIntervalData = null
let thediv = document.getElementById('thediv')
let topNavH = document.getElementsByClassName('zhanwei').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').offsetHeight
height = (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').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').style.opacity = "1";
}
//启动定时器
function starFdAd() {
if (setIntervalData == null) {
setIntervalData = setInterval(changePos, 10)
}
document.getElementsByClassName('closeButton').style.opacity = "0";
}
setTimeout(() => {
starFdAd()
})
// })
</script>
</html>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]