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.load()和Jsp的include的区别
Apr 12 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
jQuery实现高级检索功能
May 28 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP 数组基本操作小结(推荐)
2016/06/13 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Yii框架分页技术实例分析
2019/08/30 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
今天是星期几的4种JS代码写法
2013/09/17 Javascript
JavaScript中遍历对象的property的3种方法介绍
2014/12/30 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript动态改变div属性的实现方法
2015/07/22 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
Python实现的生成格雷码功能示例
2018/01/24 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
《记承天寺夜游》教学反思
2014/02/16 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
详解pytorch创建tensor函数
2022/03/22 Python