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实现的下雪动画效果.分享给大家供大家参考,具体如下: html部分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width
-
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
本文实例讲述了jQuery+HTML5实现WebGL高性能烟花绽放动画效果.分享给大家供大家参考,具体如下: 运行效果: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websocket
-
jQuery实现的模仿雨滴下落动画效果
本文实例讲述了jQuery实现的模仿雨滴下落动画效果.分享给大家供大家参考,具体如下: 效果如图: 实现思路:定时器每隔x秒生成宽高.下落速度(即动画执行时间).left随机的div. 1.CSS: body{ overflow: hidden;/*这是为了防止出现滚动条*/ } .com{ border-radius: 0 50% 50% 50%; background: skyblue; transform: rotate(45deg); position: absolute; top: 0
-
jQuery实现动画、消失、显现、渐出、渐入效果示例
本文实例讲述了jQuery实现动画.消失.显现.渐出.渐入效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <title></titl
-
jQuery实现的鼠标响应缓冲动画效果示例
本文实例讲述了jQuery实现的鼠标响应缓冲动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-缓冲动画</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js&q
-
jQuery实现数字自动增加或者减少的动画效果示例
本文实例讲述了jQuery实现数字自动增加或者减少的动画效果.分享给大家供大家参考,具体如下: 效果图: 1.HTML: <div class="up"></div> <br> <div class="down"></div> 2.JS: $(function(){ var obj={ el:$(".up"), max:1000, start:100//增加开始的初始值 } var ob
-
JQuery动画和停止动画实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
基于Jquery的温度计动画效果
设计图如下:1.xhml 复制代码 代码如下: <div id="mometer"> <div id="hot"></div> <span> <div id="Hgheader">0℃</div> <div id="Hg"></div> </span> </div> <input name="
-
jQuery实现鼠标响应式透明度渐变动画效果示例
本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>js动画-透明度变化</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.
-
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=$(".bo
-
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
本文实例讲述了jQuery实现的点赞随机数字显示动画效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示. 完整实例代码点击此处本站下载. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=
-
jQuery实现的背景颜色渐变动画效果示例
本文实例讲述了jQuery实现的背景颜色渐变动画效果.分享给大家供大家参考,具体如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" c
-
jQuery实现菜单感应鼠标滑动动画效果的方法
本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T
-
CSS+jQuery实现的一个放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title> <meta name="Generator" content="EditPlus
-
使用jQuery实现的掷色子游戏动画效果
实现原理:当色子掷出后,通过jQuery的animate()函数改变色子位移,中间加入延时效果,并变换色子背景,最终动画运行到随机产生的点数时停止,并显示掷出的点数.其实就是动画过程加入多个不同图片的帧(同flash动画影片中的帧),帧数越多效果越好,然后逐帧运行后就形成了动画效果.一.准备工作我们需要准备色子素材,本示例中,我采用从网络上获取到的色子素材,我们要做处理的是将6个色子图片(1-6点),以及中间过渡效果的图片(做运动模糊处理)放在同一张图片上,保存为dice.png,用作色子背景图
-
酷炫jQuery全屏3D焦点图动画效果
这又是一款很不错的jQuery焦点图动画,它的特点是整个焦点图基本是全屏显示的,非常大气,而且图片的倾斜也给整个焦点图3D立体的视觉效果,而且焦点图的图片切换非常流畅,相当实用. HTML代码: <div class="wrapper"> </div> <div id="pxs_container" class="pxs_container"> <div class="pxs_bg"&
-
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
随机推荐
- 前端 Vue.js 和 MVVM 详细介绍
- VBScript 剪贴板抓取URL并在浏览器中打开
- iOS Webview自适应实际内容高度的4种方法详解
- js 数组随机字符串(广告不重复)
- JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
- PHP生成器简单实例
- vue-cli+webpack记事本项目创建
- 使用Linux的alternatives命令替换选择软件的版本方法
- C#使用反射加载多个程序集的实现方法
- jQuery设置div一直在页面顶部显示的方法
- ExtJS实现文件下载的方法实例
- Byshell后门:无进程无DLL无硬盘文件
- java中对字符串每个字符统计的方法
- Android项目中使用HTTPS配置的步骤详解
- SpringBoot 定时任务遇到的坑
- 微信小程序实现图片预览功能
- 一份python入门应该看的学习资料
- react native基于FlatList下拉刷新上拉加载实现代码示例
- 易语言关于程序进程和线程的基础知识
- Android开发之StackView用法和遇到的坑分析