Js实现简单的小球运动特效
作者：mrr 发布时间：2023-07-08 23:40:40
标签：js,小球,运动
废话不多说了，直接给大家贴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实现简单的小球运动效果有所帮助！
0
投稿猜你喜欢
- date("yyyyMMdd",time()) date() 函数功能：用于格式化时间，返回一个字符串。&nb
- <!-- #include file="../conn.asp" --&
- 用户登录验证脚本,Chkpwd.asp<％ '=======用户登录验证脚本======= '如果尚未定义Passed
- 一、什么是匿名函数？在Javascript定义一个函数一般有如下三种方式：函数关键字(function)语句：function f
介绍:SQL Server 2008变更数据捕获SQL Server 2008的CDC函数读取激活了CDC的每个表所关联的事务日志来记录系统- 示例：mysql> DELIMITER //mysql> CREATE PROCEDURE `statis`()
- 选择自 xinyuxin912 的 Blog将一个图片以二进制值的形式存入Xml文件中try { &nbs
- 代理模式的优点代理模式可以保护原对象，控制对原对象的访问；代理模式可以增强原对象的功能，通过代理对象来添加一些额外的功能；代理模式可以提高系
- 概念关键字：array，数据的组合（多个）存储到一个指定的容器中，用变量指向该容器，然后可以通过变量一次性得到该容器中的所有数据.数组定义语
- 这里列出了13种实现图片或网页内容 lightbox 效果的方法，大部分是链接到各种lightbox作者的英文页面，里面都有源代码下载。Th
- 元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如&
- 阅读作者上一篇文章：段正淳的css笔记(4)css代码的简写CSS未知图片垂直居中的方法：一天大家在团队中讨论“未知图片垂直居中”的问题，突
- 问题有二进制文件中保存了 20 亿个 2 Bytes 的数，需将其读出，每 20000 个数作图，拟合后输出结果。解决# -*- codin
- 姓名的翻译： 英语是名(First name)在前，姓(Last name)在后。中文地址的翻译：如果你英语水平不高，填表时只要国家名用英语
- 一次又一次的,我发现,那些有bug的Javascript代码是由于没有真正理解Javascript函数是如何工作而导致的(顺便说一下,许多那
- 今天想说的是内容和容器的关系，顺便把之前设计中碰到的问题和大家一起探讨下。我们从软件的设置说起。（这里以QQ的设置举例）一个软件的设置（常称
- 当列表菜单项目特别多的时候，使用JavaScript手风琴菜单(Accordion Menus)是个不错的选择。手风琴折叠菜单利于组织菜单项
- 要实现的SQL查询很原始：要求从第一个表进行查询得到第二个表格式的数据，上网查询之后竟然能写出下面的SQL：代码如下:select * fr
- 有的时候取出全部数据库记录也许正好满足你的要求，不过，在大多数情况下我们通常只需得到部分记录。这样一来该如何设计查询呢？当然会更费点脑筋了，
- 当数据库服务器变得十分繁忙导致性能下降时，你会怎么办?购买更多的硬件升级你的服务器，还是重新考虑数据库服务器设计使得数据库平台具备良好的可升
