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


Posted in jQuery onFebruary 24, 2018

先上效果图:

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

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

1.HTML:

<div class="box"></div>

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是值--即返回
  var sy=0;
  time1=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实现碰到边缘反弹的动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jquery.masonry瀑布流效果
May 25 jQuery
jQuery异步提交表单实例
May 30 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
jquery动态添加带有样式的HTML标签元素方法
Feb 24 #jQuery
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 #jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 #jQuery
实现jquery放大镜的两种方法
Feb 22 #jQuery
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
如何用jQuery实现ASP.NET GridView折叠伸展效果
2015/09/26 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
原生js三级联动的简单实现代码
2016/06/07 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
JavaScript学习笔记--常用的互动方法
2016/12/07 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
es6学习笔记之Async函数基本教程
2017/05/11 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
python判断端口是否打开的实现代码
2013/02/10 Python
Python基于分水岭算法解决走迷宫游戏示例
2017/09/26 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
wxPython多个窗口的基本结构
2019/11/19 Python
win10安装python3.6的常见问题
2020/07/01 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
普天C++笔试题
2016/03/20 面试题
工程造价管理专业大专生求职信
2013/10/06 职场文书
大学军训感想
2014/02/12 职场文书
升学宴主持词
2014/04/02 职场文书
倡议书格式模板
2014/05/13 职场文书
社区健康教育工作方案
2014/06/03 职场文书
庆国庆活动总结
2014/08/28 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
运动员代表致辞
2015/07/29 职场文书
理解深度学习之深度学习简介
2021/04/14 Python
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
CSS list-style-type属性使用方法
2023/05/21 HTML / CSS