jquery回弹_jQuery实现碰到边缘反弹的动画效果

先上效果图：

录出来有点卡顿的赶脚，实际上还是挺顺畅的。

1.HTML:

2.CSS:

body{

background:skyblue

}

.box{

position: absolute;

top: 10px;

left: 10px;

width: 100px;

height: 100px;

background: white;

}

3.JS:

$(function(){

var obj=$(".box");

var x=obj.offset().left;//盒子距离左部的位置

var y=obj.offset().top;//盒子距离顶部的位置

var objwid=obj.width();//盒子的宽

var objhei=obj.height();

var winwid=$(window).width();//页面的宽

var winhei=$(window).height();

var max=10;//设置最大视觉差，就是感觉这个距离刚好碰到

var winx=winwid-objwid-max;//盒子x轴最远达到的距离

var winy=winhei-objhei-max;//盒子y轴最远达到的距离

var sx=0;//x轴是否返回的状态，0是值++即正向移动，1是值--即返