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中的call()和apply()方法
Nov 28 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
Jan 13 Javascript
jquery中animate的stop()方法作用实例分析
Jan 30 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
jQuery带控制按钮轮播图插件
Jul 31 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
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
ThinkPHP打开验证码页面显示乱码的解决方法
2014/12/18 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
javascript document.compatMode兼容性
2010/02/23 Javascript
jquery下json数组的操作实现代码
2010/08/09 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
解决Window10系统下Node安装报错的问题分析
2016/12/13 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
JS 5种遍历对象的方式
2020/06/16 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python使用BeautifulSoup分析网页信息的方法
2015/04/04 Python
Python修改MP3文件的方法
2015/06/15 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
便捷提取python导入包的属性方法
2018/10/15 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
实现向右循环移位
2014/07/31 面试题
测试驱动开发的主要步骤是什么
2014/12/10 面试题
超市营业员岗位职责
2013/12/20 职场文书
教师演讲稿范文
2014/01/08 职场文书
党员自我评价2015
2015/03/03 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers