Skip to content

Commit

Permalink
fix float image
Browse files Browse the repository at this point in the history
  • Loading branch information
@poormonitor
poormonitor committed May 1, 2024
1 parent f393bf9 commit 032b383
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 56 deletions.
2 changes: 1 addition & 1 deletion web/admin/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<?php if (isset($_SESSION[$OJ_NAME . '_' . 'administrator'])) { ?>
<tr>
<td>
<center><a class='btn btn-info btn-sm' href="setmsg.php" target="main"><b><?php echo $MSG_NEWS . "-" . $MSG_SETMESSAGE ?></b></a></center>
<center><a class='btn btn-info btn-sm' href="setmsg.php"><b><?php echo $MSG_NEWS . "-" . $MSG_SETMESSAGE ?></b></a></center>
</td>
<td>
<p><?php echo $MSG_HELP_SETMESSAGE ?></p>
Expand Down
111 changes: 58 additions & 53 deletions web/template/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -820,57 +820,11 @@ function http_judge(btn) {
return false;
}

function changePos() {
var img = document.getElementById("float"); //获得图片所在层的ID
var height = document.documentElement.clientHeight; //浏览器的高度
var width = document.documentElement.clientWidth; //浏览器的宽度
var imgHeight = document.getElementById("floatImg").height; //飘浮图片的高度
var imgWidth = document.getElementById("floatImg").width; //瓢浮图片的宽度
//设置飘浮图片距离浏览器左侧位置
img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px";
//设置飘浮图片距离浏览器右侧位置
img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px";
//设置图片在Y轴上的移动规律
if (directionY == 0) {
moveY += stepY; //飘浮图片在Y轴方向上向下移动
} else {
moveY -= stepY; //飘浮图片在Y轴方向上向上移动
}
if (moveY < 0) { //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY > (height - imgHeight)) { //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
//设置图片在X轴上的移动规律
if (directionX == 0) {
moveX += stepX;
} else {
moveX -= stepX;
}
if (moveX < 0) { //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX > (width - imgWidth)) { //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移
directionX = 1;
moveX = (width - imgWidth);
}
}

var moveX = 0; //X轴方向上移动的距离
var moveY = 0; //Y轴方向上移动的距离
var stepX = 1; //图片X轴移动的速度
var stepY = 1; //图片Y轴移动的速度
var directionX = 0; //设置图片在X轴方向上的移动方向 0:向右 1:向
var directionY = 0; //设置图片在Y轴方向上的移动方向 0:向下 1:向上

function setAD(url, href, ft) {
var img = $(document.createElement('img'))
var ahref = $(document.createElement('a'))
var float = $(document.createElement('div'))

img.appendTo(ahref)
ahref.appendTo(float)
ahref.attr("href", href)
Expand All @@ -879,21 +833,72 @@ function setAD(url, href, ft) {
img.attr("src", url)
img.css("width", "100px")
float.attr("id", "float")
float.css("position", "absolute")
float.css("z-index", "1")
float.css("position", "fixed")
float.css("z-index", "999")
float.css("display", "none")
float.appendTo("body")

var moveX = 0; //X轴方向上移动的距离
var moveY = 0; //Y轴方向上移动的距离
var stepX = 1; //图片X轴移动的速度
var stepY = 1; //图片Y轴移动的速度
var directionX = 0; //设置图片在X轴方向上的移动方向 0:向右 1:向
var directionY = 0; //设置图片在Y轴方向上的移动方向 0:向下 1:向上

function changePos() {
var img = document.getElementById("float"); //获得图片所在层的ID
var height = document.documentElement.clientHeight; //浏览器的高度
var width = document.documentElement.clientWidth; //浏览器的宽度
var imgHeight = document.getElementById("floatImg").height; //飘浮图片的高度
var imgWidth = document.getElementById("floatImg").width; //瓢浮图片的宽度
//设置飘浮图片距离浏览器左侧位置
img.style.left = parseInt(moveX) + "px";
//设置飘浮图片距离浏览器右侧位置
img.style.top = parseInt(moveY) + "px";
//设置图片在Y轴上的移动规律
if (directionY == 0) {
moveY += stepY; //飘浮图片在Y轴方向上向下移动
} else {
moveY -= stepY; //飘浮图片在Y轴方向上向上移动
}
if (moveY < 0) { //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY > (height - imgHeight)) { //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
//设置图片在X轴上的移动规律
if (directionX == 0) {
moveX += stepX;
} else {
moveX -= stepX;
}
if (moveX < 0) { //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX > (width - imgWidth)) { //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移
directionX = 1;
moveX = (width - imgWidth);
}
console.log(moveX, moveY)
requestAnimationFrame(changePos)
}

if (ft) {
moveX = Math.round(Math.random() * document.documentElement.clientWidth)
moveY = Math.round(Math.random() * document.documentElement.clientHeight)
changePos()
setInterval(changePos, 20);
float.css("left", moveX)
float.css("top", moveY)
float.css("display", "")
requestAnimationFrame(changePos)
} else {
moveX = 50
moveY = 50
float.css("position", "fixed")
float.css("right", moveX)
float.css("bottom", moveY)
float.css("display", "")
}
float.css("display", "")
}
Loading

0 comments on commit 032b383

Please sign in to comment.