页面移动层,可以在页面悬浮移动

天步

于 2016-11-21 10:08:25 发布

阅读量845

点赞数

CC 4.0 BY-SA版权

分类专栏： php

本文链接：https://blog.youkuaiyun.com/sn_qmzm521/article/details/53256637

php 专栏收录该内容

67 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的自动移动DIV元素的方法。该方法通过设置不同的移动方向使带有特定ID的DIV元素在浏览器窗口内自动移动，并且当鼠标悬停在DIV上时，移动会暂停。此外，该脚本还能根据窗口大小调整DIV的位置，确保其始终位于可视区域内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<script src="jquery183.min.js"></script>
</head>
<script type="text/javascript">
var i="";//移动方向判定的参数
function updata(l){
switch (l){
case 1:
i="";
break;
case 2:
i=2;
break;
case 3:
i=3;
break;
case 4:
i=4;
break;
case 5:
i=5;
break;
}
}
function yidong(){
//$(function(){
var winWidth = 0;
var winHeight = 0;
function findDimensions() //函数：获取尺寸
{
//获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;

if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
}
findDimensions();
//调用函数，获取数值
window.onresize=findDimensions;
var tt = $("#div3000").position().top;
var ll = $("#div3000").position().left;

if(i==""){
$("#div3000").offset({top:tt-5,left:ll-5});
if(tt<=10 || ll<=10){
updata(5);
}
}
if(i==2){
$("#div3000").offset({top:tt+5,left:ll+7});
if(tt>=winHeight-190 || ll>=winWidth-260){
updata(3);
}
}
if(i==3){
$("#div3000").offset({top:tt-5,left:ll+7});
if(tt<=10 || ll>=winWidth-260){
updata(4);
}
}
if(i==5){
$("#div3000").offset({top:tt+5,left:ll-7});
if(tt>=winHeight-190 || ll<=10){
updata(2);
}
}

if(i==4){
$("#div3000").offset({top:tt+5,left:ll-7});
if(tt>=winHeight-190 || ll<=10){
updata(1);
}
}
};
var shijian = setInterval("yidong()",100);
$(function(){
$("#div3000").hover(function(){
clearInterval(shijian);
},
function(){
shijian=setInterval("yidong()", 100);
});
})
</script>
<body>
<div id="div3000" style="width:50px;height:50px;margin:auto;border:1px solid red;position:absolute;top:200px;left:100px;">鼠标进入停止移动</div>
</body>
</html>