最近做個小項目，給網頁加個浮窗，考驗了基礎的css,js技術，還是蠻有意思的，代碼如下（部分代碼來源於引用，見底部） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d ...
最近做個小項目，給網頁加個浮窗，考驗了基礎的css,js技術，還是蠻有意思的，代碼如下（部分代碼來源於引用，見底部）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
body {
height: 900px;
background-color: white;
}
.fl {
width: 200px;
height: 100px;
background-color:white;
position: fixed;
}
div
{
border-style:solid;
border-top-color:#84C1FF;
border-top-width:22px;
}
</style>
<body>
<div class="fl" id="fl">
<b>註意:</b> "border-top-width" 單獨使用沒有效果. 要先使用 "border-style" 屬性設置 borders.
</div>
</body>
<script language=javascript>
var fl = document.getElementById('fl');
var chroX = document.documentElement.clientWidth;//yemian整個的高寬
var chroY = document.documentElement.clientHeight;
var offsetLeft = fl.offsetLeft;//盒子的位置
var offsetTop = fl.offsetTop;
var timer = 0;//起始秒錶為0
//console.log(offsetTop)
var x = 1;//每次移動一
var y = 1;
window.onresize = function(){
chroX = document.documentElement.clientWidth;//yemian整個的高寬
chroY = document.documentElement.clientHeight;
}
function move(){
offsetLeft += x;
offsetTop += y;
fl.style.left = offsetLeft + 'px';
fl.style.top = offsetTop + 'px';
//console.log(chroY)
}
window.onload = function(){
timer = setInterval(function(){
move();
if(offsetTop+200 > chroY || offsetTop < 0){
y = -y;
}
if(offsetLeft+200 > chroX || offsetLeft <0){//如果離網頁邊框不到200就反方向移動
x = -x;
}
},30)//調整速度，間隔（數字）越大越慢
}
fl.onmouseenter = function(){
clearInterval(timer) //滑鼠放在浮窗上就停止移動
}
fl.onmouseleave = function(){//滑鼠移開重新開始移動
window.onload();
}
</script>
</html>
大體思路就是設定一個計時器，每到一個時間就重新顯示一次視窗，因為你的坐標不同，而且刷新的時間是以毫秒為單位在進行，所以就顯示出了一種浮窗的效果。
引用：https://blog.csdn.net/qq_22849785/article/details/93596680
