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 相关文章推荐
jquery 最简单的属性菜单
Oct 08 Javascript
js parentElement和offsetParent之间的区别
Mar 23 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 Javascript
js文本框输入内容智能提示效果
Dec 02 Javascript
JavaScript Date对象详解
Mar 01 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
微信小程序实现签字功能
Dec 23 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
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的urlencode()URL编码函数浅析
2011/08/09 PHP
php+mysqli预处理技术实现添加、修改及删除多条数据的方法
2015/01/30 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
gulp构建小程序的方法步骤
2019/05/31 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python import用法以及与from...import的区别
2015/05/28 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python字符串中的单双引
2017/02/16 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python如何使用函数做字典的值
2019/11/30 Python
Django haystack实现全文搜索代码示例
2020/11/28 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
野兽派官方旗舰店:THE BEAST 野兽派
2016/08/05 全球购物
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
优秀的茶餐厅创业计划书
2014/01/03 职场文书
《长城和运河》教学反思
2014/04/14 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android