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 Excel操作知识点
Apr 24 Javascript
ExtJS下grid的一些属性说明
Dec 13 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
javascript日期对象格式化为字符串的实现方法
Jan 14 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
JavaScript入门基础
Aug 12 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
vue axios 在页面切换时中断请求方法 ajax
Mar 05 Javascript
推荐15个最好用的JavaScript代码压缩工具
Feb 13 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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 adodb介绍
2009/03/19 PHP
第四章 php数学运算
2011/12/30 PHP
php笔记之:文章中图片处理的使用
2013/04/26 PHP
php教程之phpize使用方法
2014/02/12 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
javascript 常用功能总结
2012/03/18 Javascript
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js关闭模态窗口刷新父页面或跳转页面
2012/12/13 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
2016/07/01 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[01:23]2019完美世界全国高校联赛(春季赛)合肥全国总决赛
2019/06/10 DOTA
对Python中9种生成新对象的方法总结
2018/05/23 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
python使用OpenCV模块实现图像的融合示例代码
2020/04/10 Python
python tkiner实现 一个小小的图片翻页功能的示例代码
2020/06/24 Python
python实现人工蜂群算法
2020/09/18 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
自我鉴定四大框架
2014/01/17 职场文书
国旗下演讲稿
2014/05/08 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
活动费用申请报告
2015/05/15 职场文书
保护环境的宣传语
2015/07/13 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
合作意向书范本
2019/04/17 职场文书