效果展示
直接上代碼
如果要用到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>
——紅黑樹及模擬實現)
