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> ...
随机推荐
- C#隐藏tabcontrol
//tabControl1.SizeMode = TabSizeMode.Fixed; //tabControl1.ItemSize = new Size(0, 1);
- SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'dtdate' 解决方法
小微OAERR: SQLSTATE[22001]: String data, right truncated: 1406 Data too long for column 'mime' at row ...
- Python学习笔记——基础篇2【第三周】——计数器、有序字典、元组、单(双)向队列、深浅拷贝、函数、装饰器
目录 1.Python计数器Counter 2.Python有序字典OrderredDict 3.Python默认字典default 4.python可命名元组namedtuple 5.Python双 ...
- JNDI实现服务器(tomcat)与数据库(mysql)连接的数据源配置以及获取连接的java代码
->首先将mysql的jar包导入到tomcat/lib文件夹下 ->然后在tomcat/conf/context.xml文件中配置以下内容 <Resource name=" ...
- ngrok内网穿透神器
ngrok类似国内的花生壳,可以将本地的内网映射到公网上,这样就可以做web开发,微信开发了.下面就介绍下ngrok是怎么配置的吧. 方式一: 一.打开ngrok的官网https://ngrok.co ...
- Linux常用命令汇总及使用方法（三）
(1)文件管理命令 ls.ls -l.ll.ls -a ls -a 显示所有文件,包括隐藏文件 ls 列举指定目录下的子目录和文件 ls -l与ll相同 列举指定目录下的子目录和文件的详细信息 tot ...
- SSH整合例子
三大框架: Struts框架 1. params拦截器: 请求数据封装 2. 类型转换/数据处理 3. struts配置 4. 文件上传/下载/国际化处理 5. 数据效验/拦截器 6. Ognl表达式 ...
- vs2008编译wxWidgets 2.8.12
用vs2008编译wxWidgets 2.8.12 FileZilla客户端源码3.5.3及以上版本依赖wxWidgets 2.8.12或更高版本,因此,编译FileZilla客户端首先需要编译wxW ...
- android 调用.NET WebServices
下载Ksoap2.jar, import org.ksoap2.SoapEnvelope;import org.ksoap2.serialization.*;import org.ksoap2.tra ...
- mybatis---知识点复习
mybatis的配置文件是configuation.xml是配置文件,主要是配置jdbc(用来创建sessionfactory)以及映射文件的别名, 一对多: <mapper namespace ...