jQuery实现边缘反弹的动画效果

首先，效果图：

它被记录为有点卡住，但实际上它相当平稳。

1.HTML:

div class='box'/div2。CSS:

正文{ background:skyblue }。box{ position:绝对值；top: 10pxleft: 10px宽度： 100 px；高度： 100像素；背景：白色；}3.JS:

$(function(){ var obj=$(')。方框’)；var x=obj.offset()。向左；//从左侧部分开始的框的位置var y=obj.offset()。顶部；//从顶部开始的框的位置var objwid=obj . width()；box var objhei=obj.height()的宽度；var winwid=$(窗口)。宽度()；var winhei的页面宽度=$(窗口)。高度()；var max=10//设置最大视觉差，即感觉这个距离刚好满足var winx=winwid-objwid-max；//盒子x轴最远距离为var winy=winhei-obj hei-max；//距离盒子Y轴最远的距离为var sx=0；//X轴是否回到状态，0为值，即向前移动，1为值——即返回var sy=0；time 1=SetInterval(function(){ if(sx==0){ obj . CSS(' left '，x)；}else if(sx==1){ obj.css('left '，x-)；} if(x=0){ sx=0；} else if(x=winx){ sx=1；} if(sy==0){ obj.css('top '，y)；}else if(sy==1){ obj.css('top '，y-)；} if(y=0){ sy=0；} else if(y=winy){ sy=1；} }，1)})这只是一个简单的效果，会造成很多问题：

1)如果出现多个框，页面会被卡住吗？

2)如果想在多块碰撞后改变运动位置，该怎么做？

3)正方形的初始位置可以是随机的吗？

4)如何不同地设置多个方块的速度

5)可以玩一个玩钻石的小游戏吗？

摘要

以上就是边肖给大家介绍的jQuery的动画效果。希望对你有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！