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> ...
随机推荐
- HDU 5884 Sort
二分,验证. 二分$k$,然后进行验证.有一个地方需要注意一下:如果$n$个数,每次合并$k$个,最后一次不能合$k$个,那么一开始需要补$0$之后再合并才是最优的.合并的时候用优先队列合并时间复杂度 ...
- 支付宝AR实景红包上线不久即遭破解，官方已提高技术门槛
临近春节,阿里巴巴和腾讯的红包大战可谓下足功夫,上周支付宝推出了AR实景红包,该玩法基于"LBS+AR+红包"的方式,类似与今年火爆全球的AR手游Pekomon Go ,只不过这次 ...
- HashMap按键排序和按值排序
对map集合进行排序 今天做统计时需要对X轴的地区按照地区代码(areaCode)进行排序,由于在构建XMLData使用的map来进行数据统计的,所以在统计过程中就需要对map进行排序. 一.简单 ...
- NET 2.0(C#)调用ffmpeg处理视频的方法
另外:ffmpeg的net封装库 http://www.intuitive.sk/fflib/ NET 2.0 调用FFMPEG,并异步读取输出信息的代码...public void ConvertV ...
- As input tri-stated
前些日子正好看到了riple兄的<一波三折--危险的"未分配"引脚>一文,颇受启发.正好最近也遇上了类似的问题,也可谓一波三折,还好最后摆平了,要不煮熟的鸭子可就要飞了 ...
- 2015 QQ最新登录算法
首先还是取得验证码,抓包可得:http://check.ptlogin2.qq.com/check?regmaster=&pt_tea=1&uin=2630366651&app ...
- Learning from the CakePHP source code - Part I
最近开始痛定思痛,研究cakephp的源码. 成长的路上从来没有捷径,没有小聪明. 只有傻傻的努力,你才能听到到成长的声音. 下面这篇文章虽然过时了,但是还是可以看到作者的精神,仿佛与作者隔着时空的交 ...
- QTP脚本汇总比较有价值
1.Object Spy的Tips Hold the CTRL key to change the window focus or perform other mouse operations 2. ...
- iOS CFStringTransForm汉字转拼音
CFStringTransform - (NSString *) phonetic:(NSString*)sourceString { NSMutableString *source = [sourc ...
- shell中$(( )) 与 $( ) 还有${ }的区别
http://blog.chinaunix.net/uid-14351756-id-2820651.html $( ) 与 ` ` (反引号)在 bash shell 中,$( ) 与 ` ` (反引 ...