网页中常见的移动悬浮框的制作
这几天要做一个很常见的移动悬浮框，网上找了下，代码比较长，也没什么耐心看，于是就自己用jquery写了一下，本人也只是一个初学者，水平有限，文章有什么不足之处欢迎指正！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>levitate</title>
<style type="text/css">
* {
margin: 0;
padding: 0
}
div{
height:800px; background-color:#6FF;}
.levitate {
width: 100px;
height: 50px;
font-size: 14px;
background-color: red;
text-align: center;
line-height: 50px;
color: white;
border-radius: 5px;
position:fixed;
top:0;
left:0;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var levitate=$(.levitate),
timer,
fleft=true,
ftop=true,
x,y;
var stepLeft=5, //每一步横向移动的距离
stepTop=2, //每一步纵向移动的距离
interval=100; //定时器时间间隔
move();
/*设置定时器移动函数*/
function move(){
timer=setInterval(function(){
var nowleft=parseInt(levitate.css(left)),
nowtop=parseInt(levitate.css(top));
if(nowleft<stepLeft){
if(ftop){
x=stepLeft;
y=stepTop;
}else{
x=stepLeft;
y=-stepTop;
}
fleft=true;
}else if(nowleft>$(window).width()-100){
if(ftop){
x=-stepLeft;
y=stepTop;
}else{
x=-stepLeft;
y=-stepTop;
}
fleft=false;
}
if(nowtop<stepTop){
if(fleft){
x=stepLeft;
y=stepTop;
}else{
x=-stepLeft;
y=stepTop;
}
ftop=true;
}else if(nowtop>$(window).height()-50){
if(fleft){
x=stepLeft;
y=-stepTop
}else{
x=-stepLeft;
y=-stepTop;
}
ftop=false;
}
step(x,y);
},interval)
}
/*每一小步的移动函数*/
function step(offsetLeft,offsetTop){
var left=parseInt(levitate.css(left))+offsetLeft;
top=parseInt(levitate.css(top))+offsetTop;
if(offsetLeft>0){
offsetLeft=+=+offsetLeft;
if(offsetTop>0){
offsetTop=+=+offsetTop;
}else{
offsetTop=-=+Math.abs(offsetTop);
}
}else{
offsetLeft=-=+Math.abs(offsetLeft);
if(offsetTop>0){
offsetTop=+=+offsetTop;
}else{
offsetTop=-=+Math.abs(offsetTop);
}
}
levitate.animate({
left:offsetLeft,top:offsetTop},50);
}
})
</script>
</head>
<body>
<div>
<div class="levitate">我是悬浮框</div>
</div>
</body>
</html>
复制上述代码即可运行，控制移动的速度和方向只需修改stepLeft，stepTop，interval这3个参数即可。