javascript动画效果之匀速运动
html和css写在一起方便看,div通过定位设置为-200隐藏,span也是通过定位定在div靠左的中间
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
width: 200px;
height: 200px;
background: green;
position: relative;
left: -200px;
} span {
width: 30px;
height: 30px;
line-height: 30px;
background: red;
position: absolute;
left: 200px;
top: 85px;
text-align: center;
cursor: pointer;
}
</style>
</head> <body>
<div id="div">
<span id="show">show</span>
</div> </body> </html>
js部分是通过添加定时器设置offsetLeft值的自增和自减，来达到div显示和隐藏的效果
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() {
//定义了隐藏的div为pto
var pto = $("div");
//定义了按钮span为 btn
var btn = $("show");
//定义一个空的定时器
var timer = null; //按钮绑定一个鼠标移进事件
btn.onmouseenter = start; //自定义函数用于自动增加
function start() {
//防止自加速,每次开始前都要清除定时器
clearInterval(timer);
//定义一个定时器
timer = setInterval(show, 30);
} //自定义函数,直到offsetLeft的值为0,否则offsetLeft的值从-200一直自增5
function show() {
if (pto.offsetLeft == 0) {
clearInterval(timer);
} else {
pto.style.left = pto.offsetLeft + 5 + 'px';
}
} //绑定一个鼠标移出事件
btn.onmouseleave = back; //自定义函数,用于自动减少
function back() {
clearInterval(timer);
timer = setInterval(clear, 30);
} //自定义函数，直到offsetLeft的值为-200，否则offsetLeft的值一直自减5
function clear() {
if (pto.offsetLeft == -200) {
clearInterval(timer);
} else {
pto.style.left = pto.offsetLeft - 5 + 'px';
}
} }
</script>
javascript动画效果之匀速运动的更多相关文章
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
- javascript动画效果
之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...
随机推荐
- .net core 11
- http请求的概念
我曾多次阅读http协议,但是理解依然不深,在此,再次阅读,再次理解.加深两点:解析头部信息\r\n,分解头部和主体用\r\n\r\n.之所以一次请求会看到网络里有很多请求,是因为浏览器代替访问了多次 ...
- re模块 | Python 3.5
https://docs.python.org/3/library/re.html http://www.cnblogs.com/PythonHome/archive/2011/11/19/22554 ...
- C#在客户端验证数字证书（Certificate）
ServicePointManager.ServerCertificateValidationCallback = CertificateValidationCallback;//Init时执行,用于 ...
- C#中的引用传递、值传递
先来说下C#中的数据类型.分值类型和引用类型两大类. 值类型:直接存储数据的值,保存在内存中 引用类型:存储对值的引用,实际上存储的就是一个内存的地址 C#预定义的简单类型,像int,float, ...
- GoogleCodeJam
2016年没有参赛,在师兄的介绍下,试了一下简单的一题,需要注意的是读写数据的形式还有具体代码. 2016资格赛 A题 Problem Bleatrix Trotter the sheep has d ...
- Ecstore安装篇-2.单机部署【linux】
单机部署实施-linux 单机部署实施-linux author :James,jimingsong@vip.qq.com since :2015-03-02 系统环境需求 软件来源 底层依赖 1. ...
- java中异常处理机制的简单原理
以上是自认为的java异常处理的简单原理,如有不妥之处还请各位大神帮忙指点,谢谢!
- Jenkins中集成Gcov代码覆盖率报告
最近终于把gcov代码覆盖报告集成到jenkins中了,总算是完成工作,写篇博客总结下. 我循序渐进地用了三个工具:gcov, lcov, gcovr 这三个工具原理(其实gcovr依赖于GNU的gc ...
- Oracle中sys和system用户的区别
1.数据库的启动需要以SYSDBA/SYSOPER身份登录. 2.如果在同一主机上使用IPC连接到数据库使用操作系统授权,登录任何一个用户都可以拥有as sysdba和as sysoper. 3.sy ...