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中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
jquery实现广告上下滚动效果
Mar 04 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使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP token验证生成原理实例分析
2019/06/05 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
web css实现整站样式互相切换
2013/10/29 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
详解JavaScript中循环控制语句的用法
2015/06/03 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
JavaScript设计模式之单例模式详解
2017/06/09 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
VueX模块的具体使用(小白教程)
2020/06/05 Javascript
vue基于Echarts的拖拽数据可视化功能实现
2020/12/04 Vue.js
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python设计模式之观察者模式实例
2014/04/26 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
CSS3田字格列表的样式编写方法
2018/11/22 HTML / CSS
世界第一冲浪品牌:O’Neill
2016/08/30 全球购物
视图的作用
2014/12/19 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android