<div id="roll">
<div id="rollClose">X</div>
<div class="roll-content">
<p>xxxxxxxxxxxx</p>
<p>舉報電話：xxxxxxxxxxxx</p>
<p>舉報郵箱：xxxxxxxxxxxx</p>
<p>舉報信箱：xxxxxxxxxxxx</p>
<p>舉報地址：xxxxxxxxxxxx</p>
</div>
</div>
<style>
roll {
width: 400px;
padding: 20px;
position: fixed;
background: rgba(22, 124, 118, 1);
color: #FFFFFF;
border-radius: 6px;
z-index: 99999999;
}
.roll-content p {
margin: 0;
padding: 0;
font-size: 16px;
line-height: 30px;
}
.roll-content p:first-child {
/* margin-left: -12px; */
}
rollClose {
position: absolute;
cursor: pointer;
top: 6px;
right: 12px;
}
</style>
<script>
class floatingW{
constructor(roll, rollClose, speed = 20, x=0, y=0){
this.interval = null; // 定義保存setInterval的變量
this.roll = roll; // 定義保存飄窗對象
this.rollClose = rollClose; // 定義保存關閉按鈕的對象
this.isClose = false; // 定義是否關閉的變量
this.speed = speed; // 定義飄窗的速度
this.statusX = 1; // 定義，left屬性值變化的幅度
this.statusY = 1; // 定義寒屯，top屬性值變化的幅度
this.x = x; // 定義初始狀態(tài)下left屬性的值
this.y = y; // 定義初始狀態(tài)下top屬性的值
// 定義飄窗可以移動的寬度
this.winW = document.documentElement.clientWidth - this.roll.offsetWidth;
// 定義飄窗可以移動的高度
this.winH = document.documentElement.clientHeight - this.roll.offsetHeight;
}
// 飄動
Move(){
this.interval = setInterval(this.__Go.bind(this), this.speed)
}
// 停止
stop(){
clearInterval(this.interval);
}
__Go(){
// 設置div的left屬性值
this.roll.style.left = this.x + 'px';
// 設置div的top屬性值
this.roll.style.top = this.y + 'px';
// 如果statusX=1則每次減少1px,否則加1px
this.x = this.x + (this.statusX ? -1 : 1)
//如果left屬性值小于0身冬，也就是div要超出左邊界了饱普，就將statusX設置為0
if (this.x < 0) { this.statusX = 0 }
//如果top屬性值大于winW医吊，也就是div要超出右邊界了踩麦，就將statusX設置為1
if (this.x > this.winW) { this.statusX = 1 }
this.y = this.y + (this.statusY ? -1 : 1)
if (this.y < 0) { this.statusY = 0 }
if (this.y > this.winH) { this.statusY = 1 }
}
// 關閉
Close(){
this.isClose = true
this.roll.style.display = 'none'
this.stop()
}
}
let roll = document.getElementById("roll");
let rollClose = document.getElementById("rollClose");
let floatingWindow = new floatingW(roll, rollClose);
floatingWindow.Move();
roll.onmouseover = function(){floatingWindow.stop();}
roll.onmouseout = function(){
if(!floatingWindow.isClose)
floatingWindow.Move();
}
rollClose.onclick = function () { floatingWindow.Close() };
</script>
