[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)
javascript中，如何让一个元素(比如div)运动起来呢？
设置基本的样式，一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 );
<style>
div {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0px;
}
</style>
基本的结构:
<input type="button" value="动起来"/>
<div id="box"></div>
当我们点击，这个按钮的时候，要让div运动起来，其实就是让div的left值持续变化，那么div就会产生运动效果，我们先让left改变，再让他持续改变
window.onload = function(){
var oBtn = document.querySelector( "input" ),
oBox = document.querySelector( '#box' );
oBtn.onclick = function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}
那么每当我点击按钮的时候，div的left值就会在原来的基础上加上10px。这里也可以用获取非行间样式的方法获取left的值再加上10px，也可以达到效果
function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
window.onload = function () {
var oBtn = document.querySelector("input"),
oBox = document.querySelector('#box');
oBtn.onclick = function () {
oBox.style.left = parseInt( css( oBox, 'left' ) ) + 10 + 'px';
}
}
offsetLeft与获取非行间样式left的值 有什么区别呢？
offsetLeft没有px单位，而left是有px单位的
oBtn.onclick = function () {
// alert( css( oBox, 'left' ) ); //0px
alert( oBox.offsetLeft ); //
}
现在div是点击一下动一下，我们让他持续动起来，怎么做？ 加上定时器
oBtn.onclick = function () {
setInterval( function(){
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}, 1000 / 16 );
}
当我们点击按钮时候，div就会不停的向左运动，怎么让他停下来呢？停下来，肯定是需要条件的，比如，我们让他跑到500px的时候停下来
var timer = null;
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft == 500 ) {
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 10 + 'px';
}
}, 1000 / 16 );
}
这样，我们就可以让div停在500px的位置，这里如果我们把步长10 改成 7或者8，你会发现停不下来了，为什么呢？因为会跳过500px这个判断条件
0, 7, 14, 21 .... 280, 287, 294, 301, ... 490, 497, 504. 从497变成504跳过了500px，所以div停不下来，那怎么办呢？修改下判断条件就可以了.
oBtn.onclick = function () {
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
把条件变成>=500 清除定时器， 同时还要加上这句代码oBox.style.left = 500 + 'px'，让他强制被停在500px, 否则div就不会停在500px, 而是504px了，还有一个问题，如果在div运动的过程中，你不停的点击按钮，会发现， div开始加速运动了，而不是每次加10px了，这又是为什么呢？这是因为，每次点击一下按钮，就开了一个定时器，每次点击一个按钮就开了一个定时器，这样就会有多个定时器叠加，那么速度也会产生叠加，所以div开始加速了，那么我们要让他保持10px的速度，意思就是不要让定时器叠加，更通俗点说就是确保一个定时器在开着。应该怎么做呢？
oBtn.onclick = function () {
clearInterval( timer );
timer = setInterval( function(){
if ( oBox.offsetLeft >= 500 ) {
oBox.style.left = 500 + 'px';
clearInterval( timer );
}else {
oBox.style.left = oBox.offsetLeft + 7 + 'px';
}
}, 1000 / 16 );
}
只需要在每次点击按钮的时候，清除之前的定时器就可以了，这样就能确保始终一个定时器开着，至此，一个最基本的匀速运动结构就完成了，那么我们可以把他封装成函数
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
有了这个函数之后，我们来小小的应用一下。
http://www.jiathis.com/getcode
打开这个网站，你注意看他右边有个侧栏式效果（分享到），这种特效在网站上很普遍
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>侧边栏 - by ghostwu</title>
<style>
#box {
width: 150px;
height: 300px;
background: red;
position: absolute;
left: -150px;
top: 50px;
} #box div {
width: 28px;
height: 100px;
position: absolute;
right: -28px;
top: 100px;
background: green;
}
</style>
<script>
window.onload = function () {
var timer = null;
var oBox = document.getElementById("box");
oBox.onmouseover = function () {
animate(this, 0, 10);
}
oBox.onmouseout = function () {
animate(this, -150, -10);
}
function animate(obj, target, speed) {
clearInterval(timer);
timer = setInterval(function () {
if (obj.offsetLeft == target) {
clearInterval(timer);
} else {
obj.style.left = obj.offsetLeft + speed + 'px';
}
}, 30);
}
}
</script>
</head>
<body>
<div id="box">
<div>分享到</div>
</div>
</body>
</html>
再来一个淡入淡出的效果:
当鼠标移上去之后，透明度变成1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出 - by ghostwu</title>
<style>
img {
border: none;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script>
window.onload = function () {
var timer = null;
var oImg = document.getElementById("img");
oImg.onmouseover = function(){
animate( this, 100, 10 );
}
oImg.onmouseout = function(){
animate( this, 30, -10 );
}
//alpha=30 --> 100
function animate(obj, target, speed) {
clearInterval(timer);
var cur = 0;
timer = setInterval(function () {
cur = css( obj, 'opacity') * 100;
if( cur == target ){
clearInterval( timer );
}else {
cur += speed;
obj.style.opacity = cur / 100;
obj.style.filter = "alpha(opacity:" + cur + ")";
}
}, 30);
} function css(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
}
</script>
</head>
<body>
<img src="./img/h4.jpg" alt="" id="img"/>
</body>
</html>
[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)的更多相关文章
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...
- [js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章: [js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件 [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出) [js高手之路]打造通用的匀速运动框架 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
该系列文章索引: [js高手之路]node js系列课程-创建简易web服务器与文件读写 [js高手之路]node js系列课程-图解express+supervisor+ejs用法 [js高手之路] ...
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
随机推荐
- 转：【Java并发编程】之十六：深入Java内存模型——happen-before规则及其对DCL的分析（含代码）
转载请注明出处:http://blog.csdn.net/ns_code/article/details/17348313 happen-before规则介绍 Java语言中有一个"先行发生 ...
- 201521123085 《Java程序设计》第7周学习总结
1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 代码: ...
- 201521123050 《Java程序设计》第4周学习总结
1. 本周学习总结 2. 书面作业 1.注释的应用 1.1使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 2.面向对象设计(大作业1,非常重要) 2.1 将在 ...
- 201521123070 《JAVA程序设计》第2周学习总结
1. 本章学习总结 1.学习了string类: 2.了解了ArrayList的特性和使用方法: 3.学习了类名包名. 2. 书面作业 Q1.使用Eclipse关联jdk源代码(截图),并查看Strin ...
- 201521123049 《JAVA程序设计》 第2周学习总结
*1. 本周学习总结 1.复习了一遍基本类型:整数类型(byte,short,int,long,char).浮点类型(float,double).boolean类型(true, false). 2.了 ...
- 《JAVA程序设计》第9周学习总结
1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现 ...
- vim基础详解
目录: 什么是vim Vim能做什么 如何学习vim 如何用vim打开一个文件 Vim的三种模式 插入模式 命令模式 扩展命令模式 光标移动 在命令模式下 删除,复制,粘贴 扩展命令模式 可视化模式 ...
- centOS 7一个解决“network.service: control process exited, code=exited status=1”方法
今天早上2017-08-04,我打开虚拟机,使用远程工具xshell对虚拟机进行连接,我发现连接不上去,然后我ifconfig,发现找不到ens33了,就剩一个本地回环,看来是我的网络出现了问题,然后 ...
- 对比requirejs更好的理解seajs
seajs遵循CMD规范,requirejs遵循AMD规范.AMD规范是预加载,CMD规范是赖加载. 下文举例假设有文件 b.js, c.js如下 //b.js define(function(req ...
- MySQL集群（三）mysql-proxy搭建负载均衡与读写分离
前言 前面学习了主从复制和主主复制,接下来给大家分享一下怎么去使用mysql-proxy这个插件去配置MySQL集群中的负载均衡以及读写分离. 注意:这里比较坑的就是mysql-proxy一直没有更新 ...