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插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
简单实现jquery隔行变色
Nov 09 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery zTree树插件的使用教程
Aug 16 jQuery
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php 获取页面中指定内容的实现类
2014/01/23 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
用js实现in_array的方法
2013/11/05 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
js中opener与parent的区别详细解析
2014/01/14 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
浅谈javascript中的数据类型转换
2016/12/27 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python中print函数简单使用总结
2019/08/05 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
美国主要的特色咖啡和茶公司:Peet’s Coffee
2020/02/14 全球购物
比较一下entity bean和session bean
2013/12/27 面试题
小学教师岗位职责
2013/11/25 职场文书
搞笑征婚广告词
2014/03/17 职场文书
2014年学雷锋活动总结
2014/06/26 职场文书
平安工地汇报材料
2014/08/19 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
个人违纪检讨书
2014/09/15 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
作文评语集锦
2014/12/25 职场文书
教师个人总结范文
2015/02/11 职场文书
公司门卫岗位职责
2015/04/13 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技