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> ...
随机推荐
- css animation 动画的制作
上效果 效果描述:原来这些图片都绝对定位在最右边,并有一个css3 3D的旋转初始效果.随着动画的开始,依次向左移动,并旋转到0度.(主要用于引导页步骤的描述) 上代码: html布局 <div ...
- openstack私有云布署实践【18 修改实例DHCP服务的DNS IP】
某天,由于Linux服务器默认没有DNS缓存功能,每次服务器每访问一个http域名链接时,都会触发一次DNS域名解析查询,降低了调用API接口的时延,所以我司后续启用的内网的dnsmasq DNS服务 ...
- Android中Activity全局共享方法AppContext
在 android 的所有 activity 中共享同一个对象实例的方法 1. 新建 AppContext.java 文件(名称可自定义) public class AppContext extend ...
- ap143 led修改
以前的硬件版本只使用了一个eth口,新的板子增加了一个eth口,并且增加了响应的通信时使用的灯. led修改涉及到一下的内容: (1)led 对应的gpio口(这个需要根据原理图来定义) 需要修改的源 ...
- 通过反射获取所有的Action 一般用于权限管理
public IList<ActionPermission> GetAllActionByAssembly() { var result = new List<ActionPermi ...
- Scala内部类
注意:Java内部类从属于外部类,而Scala内部类从属于对象(外部类的实例本身).
- PHP22期基础班总结
11月7号,我们结束了为期17天的PHP基础班课程,最后一天的晚自习之后,马总问了我们的一个问题,基础班1000块钱的课程,我们认为是否值得这个价格?这其实是一个很好的问题. 2016年1000块钱能 ...
- javaweb之session过期验证
session过期判断的基本思想:用户登录成功后,将用户账号信息保存在session中,然后几乎每次执行命令都要经过过滤器,过滤器检查session中是否存在账号,若不存在, 则返回登录页面,反之正常 ...
- expri on the testdisk
首先,根据GNU的编译知识,来分析下载下来的目录,虽然里面有很多win的,andriod的文件,就不要管了,考入centos里面去, 按下面顺序执行就ok了. 第一步执行顺序: #autoscan ...
- [转]URL的解析，C语言实现
http://blog.csdn.net/cuishumao/article/details/10284463 一 说明(1)应用情况:比如基于socket来实现http协议等,这时候就需要解析URL ...