运动 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的制作. 首先,在前端的学习过程中,轮播图是我们一定要学习的,所以为了更加高效的实现各种轮播图,封装了一个运动的 ...
随机推荐
- android上下文菜单
XML: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...
- Android自学笔记：Git下载源代码
Info:做J2ME几年了,现在基本没有公司用了,是时候向Android领域进军了. 自学中,难免会有疏漏,有问题请及时提出,共同学习共同进步. 2014-10-13:初版 2014-10-14:添加 ...
- ffmpeg relocation error
在向imx6移植ffmpeg后,一般的编解码操作没有问题,但是当从摄像头录视频时, ffmpeg -f video4linux2 -s 640*480 -r 10 -i /dev/video0 tes ...
- 【JAVA】【Eclipse】出现This element neither has attached source nor attached Javadoc...的解决方法
This element neither has attached source nor attached Javadoc and hence no Javadoc could be found Ec ...
- Linux常用性能调优工具索引
root@ubuntu:~# dstat----total-cpu-usage---- -dsk/total- -net/total- ---paging-- ---system--usr sys i ...
- redis常用总结
1. 使用redis有哪些好处? (1) 速度快,因为数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1) (2) 支持丰富数据类型,支持string,li ...
- 初学python之urllib
urllib.request urlopen()urllib.urlopen(url, data, proxies) :创建一个表示远程url的类文件对象,然后像本地文件一样操作这个类文件对象来获取远 ...
- 在Ubuntu上安装Mysql For Python
安装: 首先安装pip,并且把pip更新到最小版本 apt-get install python-pip pip install -U pip 安装mysql开发包 apt-get install p ...
- jquery实现旋转木马的插件slick
旋转木马的是一般网站上都会有的图片轮播效果, html: <section id="features" class="blue" style=" ...
- TJI读书笔记16-异常处理
TJI读书笔记16-异常处理 概念 基本异常情形 异常的捕获 自定义异常 异常说明 捕获所有异常 栈轨迹 重新抛出异常 Java标准异常 使用finally 异常的限制 构造器 异常的匹配 其他乱七八 ...