Js实现简单的小球运动特效


Posted in Javascript onFebruary 18, 2016

废话不多说了,直接给大家贴js代码了,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-"/>
</head>
<body style="background:pink;">
<div id="ball" style="position:absolute;" onmouseover="stop()" onmouseout="jixu()">
<img src="http://img.taobaocdn.com/imgextra/i//TBfGvsdpXXXXbDXXXXXXXXXXXX-.gif"/>
</div>
<script type="text/javascript">
//定义局部变量
var directX=;//定义x轴方向
var directY=;//定义y轴方向
var ballX=;//定义x轴坐标
var ballY=;//定义y轴坐标
var speed=;//定义一个速度
var myball=document.getElementById("ball");
function ballMove(){
ballX=ballX+directX*speed;
ballY=ballY+directY*speed;
//改变div的left,top的值
myball.style.left=ballX+"px";
myball.style.top=ballY+"px";
//判断x轴什么时候转向
if(ballX+myball.offsetWidth>=document.documentElement.clientWidth||ballX<=){
//clientWidth浏览器不带滚动条的宽度;clientHeight浏览器不带工具栏菜单栏以及滚动条等的高度
directX=-directX;//offsetWidth可以返回一个对象的实际宽度(不带单位)offsetHeight类同
}
//判断y轴何时转向
if(ballY+myball.offsetHeight>=document.documentElement.clientHeight||ballY<=){
directY=-directY;
}
}
var stopmove=setInterval("ballMove()",);
function stop(){
clearInterval(stopmove);
}
function jixu(){
var stopmove=setInterval("ballMove()",); ;
}
</script>
</body>
</html>

以上代码是比较简单,希望对大家使用Js实现简单的小球运动效果有所帮助!

Javascript 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
纯jquery实现模仿淘宝购物车结算
Aug 20 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
Jul 29 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 #Javascript
js实现简单的省市县三级联动效果实例
Feb 18 #Javascript
XML、HTML、CSS与JS的区别整理
Feb 18 #Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 #Javascript
AngularJS 2.0新特性有哪些
Feb 18 #Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 #Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 #Javascript
You might like
php超快高效率统计大文件行数
2015/07/05 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
TableSort.js表格排序插件使用方法详解
2017/02/10 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
2018/09/07 jQuery
vue中多个倒计时实现代码实例
2019/03/27 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
JavaScript forEach中return失效问题解决方案
2020/06/01 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
JavaScript实现点击图片换背景
2020/11/20 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python中删除文件的程序代码
2011/03/13 Python
pycharm 使用心得(三)Hello world!
2014/06/05 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
基本款天堂:Everlane
2017/05/13 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
Delphi CS笔试题
2014/01/04 面试题
迎八一活动主题
2014/01/31 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript