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 相关文章推荐
js中switch case循环实例代码
Dec 30 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
浅谈JavaScript 的执行顺序
Aug 07 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
JavaScript累加、迭代、穷举、递归等常用算法实例小结
May 08 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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
PHP4中实现动态代理
2006/10/09 PHP
php smarty 二级分类代码和模版循环例子
2011/06/16 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
2013/10/15 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
2014/01/31 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
jQuery实现伪分页的方法分享
2016/02/17 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python的Template使用指南
2014/09/11 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
护理专业自我鉴定
2014/01/30 职场文书
吨的认识教学反思
2014/04/27 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
创先争优标语
2014/06/27 职场文书
爬山的活动方案
2014/08/16 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书
导游词之任弼时故居
2020/01/07 职场文书
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
spring boot实现文件上传
2022/08/14 Java/Android