运动 js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运动</title>
</head>
<body>
<input type="button" value="运动" id="btn">
<div id="div1" style="width: 100px; height: 100px;background-color: #eee; position: absolute;"></div>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var oBtn=document.getElementById('btn');
var oTimer=null;
oBtn.onclick=function(){
clearInterval(oTimer); //开启定时器之前先关闭定时器，防止同时调用好几个定时器
oTimer=setInterval(function(){
if (oDiv.offsetLeft>=300) {
clearInterval(oTimer);
}else{
oDiv.style.left=oDiv.offsetLeft+5+'px'; //加if判断是因为当div已经到达300处时再点击div仍会动一下
}
},30)
}
}
</script>
</body>
</html>
运动 js的更多相关文章
- js动画 Css提供的运动 js提供的运动
1. 动画 (1) Css样式提供了运动 过渡的属性transition 从一种情况到另一种情况叫过渡 Transition:attr time linear delay: ...
- 有方向的运动js
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
- js实现缓冲运动，和匀速运动有点不相同
缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. <style> *{ padding:0; margin:10px 0; } #div1{ height:100px; ...
- 二、JavaScript语言--JS动画--JS动画效果
运动框架实现思路: 1.速度(改变值:left , right , width , height , opacity) 2.缓冲运动 3.多物体运动 4.任意值改变 5.链式运动 6.同时运动 js用 ...
- JS学习随手笔记
===================字符串===================== 字符串中间的空格也是要算长度的. 每一个字符都可以返回对应的Unicode 编码 文字的简单加密都是通过char ...
- JS面向对象介绍
JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...
- js入门学习~ 运动应用小例
要实现的效果如下: 鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~ (且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~ --------------------- ...
- js模拟抛出球运动
js练手之模拟水平抛球运动 -匀加速运动 -匀减速运动 模拟运动有些基本的思路,当前所在点的坐标,元素的长宽是多少,向右/向下运动x/y增加,向上/向左运动x/y减少,运动的路程是多少,用什么方程进行 ...
- 使用原生JS实现一个风箱式的demo，并封装了一个运动框架
声明,该DEMO依托于某个培训机构中,非常感谢这个培训结构.话不多说,现在开始改demo的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...
随机推荐
- wxWidgets编译安装gtk问题的解决办法
下面是google到的一篇博文.我在centos5.3中想安装amule,结果编译时,提示没找到wxWidgets退出了.只好又去下了wxWidgets,还是源码,需要编译.编译中出现和下面这位网友一 ...
- 单例设计模式全局缓存accessToken
使用微信JS-SDK开发的小伙伴们,看文档经常会看到这样一句话:(下面是微信开发文档的一部分原话截图) 这句话就是:开发者必须在自己的服务全局缓存access_token,jsapi_ticket 下 ...
- JQ判断复选框是否选中
方法一: if($('#checkbox').is(':checked')) {} 方法二:if ($('#checkbox').attr('checked')) {} 方法三:if ($(" ...
- 可变参数宏__VA_ARGS__和...
__VA_ARGS__ 是一个可变参数的宏(gcc支持).实现思想就是宏定义中参数列表的最后一个参数为省略号(也就是三个点).这样预定义宏_ _VA_ARGS_ _就可以被用在替换部分中,替换省略号所 ...
- （分享）多功能 PDF转换器v3.0版本
转换的效果非常不错,值得使用.破解成功的截图:这个程序必须随便输入注册码注册,不然会有水印的. 这是程序主界面了 正在测试pdf转word过程,转换结果个人感觉非常不错,跟原版pdf的格式非常接近,个 ...
- Servlet中转发和重定向的区别
Servlet中页面的跳转有两种方式:转发和重定向. 1.转发和重定向的区别 ①转发是服务器行为,重定向是客户端行为. ②转发是浏览器发生了一次请求,重定向至少是两次请求. ③转发地址栏中的url不会 ...
- arguments转换为数组格式
var agArr = []; for(var i = 0; i < arguments.length; i++) { agArr.push(arguments[i]) }
- 学生信息管理系统（自己辛辛苦苦做了几天，虽然简陋，也凑合吧，bug不算太严重，主要是格式不太很完美）
/*学生成绩管理系统V3.0(链表版)某班有最多不超过30人(具体人数由键盘输入)参加期末考试,最多不超过6门(具体门数由键盘输入).使用链表编程成实现如下菜单驱动的学生成绩管理系统.1.从文件读入每 ...
- vim显示行号、语法高亮、自动缩进的设置
转载自:http://blog.csdn.net/chuanj1985/article/details/6873830 在UBUNTU中vim的配置文件存放在/etc/vim目录中,配置文件名为v ...
- toolkit:Accordion DataTemplate ListBox TextBlock Interaction.Triggers
困扰好几个小时的问题终于解决了,本人系菜鸟,使用MVVM设计模式,绑定DataTemplate的Command,需要使用 DataContent的资源,否则无法触发ICommand ClickChil ...