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

最新推荐文章于 2017-06-15 01:00:26 发布

天步

最新推荐文章于 2017-06-15 01:00:26 发布

阅读量803

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/sn_qmzm521/article/details/53256637

版权

php 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

<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.οnresize=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>