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 相关文章推荐
JSON JQUERY模板实现说明
Jul 03 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
node.js中的fs.createReadStream方法使用说明
Dec 17 Javascript
js变形金刚文字特效代码分享
Aug 20 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
详解Node项目部署到云服务器上
Jul 12 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 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
国内咖啡文化
2021/03/03 咖啡文化
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
php简单统计在线人数的方法
2016/05/10 PHP
ThinkPHP 5 AJAX跨域请求头设置实现过程解析
2020/10/28 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
JQuery select标签操作代码段
2010/05/16 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
基于Django的ModelForm组件(详解)
2017/12/07 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
pyshp创建shp点文件的方法
2018/12/31 Python
人工神经网络算法知识点总结
2019/06/11 Python
python利用tkinter实现屏保
2019/07/30 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
python如何写出表白程序
2020/06/01 Python
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
面试后的感谢信范文
2014/02/01 职场文书
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
土建专业毕业生自荐书
2014/07/04 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Go遍历struct,map,slice的实现
2021/06/13 Golang