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 EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
使vue实现jQuery调用的两种方法
May 12 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery实现飞机大战小游戏
Jul 05 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
更改localhost为其他名字的方法
2014/02/10 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
理解Javascript_09_Function与Object
2010/10/16 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
jQuery表格插件datatables用法汇总
2016/03/29 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
微信小程序实现日历小功能
2020/11/18 Javascript
python中__call__方法示例分析
2014/10/11 Python
3分钟学会一个Python小技巧
2018/11/23 Python
Python理解递归的方法总结
2019/01/28 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Python调用JavaScript代码的方法
2020/10/27 Python
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
C++:局部变量能否和全局变量重名
2014/03/03 面试题
英文简历中的自我评价
2013/10/06 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
2014年镇党建工作汇报材料
2014/11/02 职场文书
家属联谊会致辞
2015/07/31 职场文书
祝酒词范文
2015/08/12 职场文书
入门学习Go的基本语法
2021/07/07 Golang
muduo TcpServer模块源码分析
2022/04/26 Redis