[js高手之路]面向对象版本匀速运动框架
这篇文章的效果,需要看过以下3篇文章:
[js插件开发教程]一步步开发一个可以定制配置的隔行变色小插件
[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)
[js高手之路]打造通用的匀速运动框架
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>通用的面向对象匀速运动框架 - by ghostwu</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
margin:20px;
}
</style>
<script>
( function(){
function css( obj, name ){
if ( obj.currentStyle ) {
return obj.currentStyle[name];
}else {
return getComputedStyle( obj, false )[name];
}
}
var ghostwu = {};
ghostwu.linear = {
A : function( option ){
return new ghostwu.linear.init( option );
}
};
ghostwu.linear.init = function( option ){
this.opt = {
'selector' : '',
'css-name' : {},
'speed' : 10,
'cb' : undefined
}
for( var key in option ){
this.opt[key] = option[key];
}
this.ele = document.querySelector( this.opt['selector'] );
this.bindEvent();
}
ghostwu.linear.init.prototype.bindEvent = function() {
var _this = this;
this.ele.onmouseover = function(){
_this.animate( this );
};
this.ele.onmouseout = function(){
_this.animate( this );
}
}
ghostwu.linear.init.prototype.animate = function(){
var cur = 0, _this = this;
clearInterval(_this['ele'].timer);
_this['ele'].timer = setInterval(function () {
var bFlag = true;
for (var key in _this.opt['css-name']) {
if (key == 'opacity') {
cur = css(_this.ele, 'opacity') * 100;
} else {
cur = parseInt(css(_this.ele, key));
}
var target = _this.opt['css-name'][key];
if (cur != target) {
bFlag = false;
if (key == 'opacity') {
_this['ele'].style.opacity = ( cur + _this.opt['speed'] ) / 100;
_this['ele'].style.filter = "alpha(opacity:" + (cur + _this.opt['speed']) + ")";
} else {
_this['ele'].style[key] = cur + _this.opt['speed'] + "px";
}
}
} if (bFlag) {
clearInterval(_this['ele'].timer);
_this.opt['cb'] && _this.opt['cb'].call( _this['ele'] );
}
}, 1000 / 16 );
}
window.g = ghostwu;
} )();
window.onload = function() {
g.linear.A({
'selector' : '#box',
'css-name' : {
'width' : 300,
'height' : 400
}
});
g.linear.A({
'selector' : '#box2',
'css-name' : {
'width' : 300,
'height' : 400
}
});
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
</body>
</html>
鼠标移动到div查看效果:
[js高手之路]面向对象版本匀速运动框架的更多相关文章
- [js高手之路]面向对象+设计模式+继承一步步改造简单的四则运算
到目前为止,我已经写完了面向对象完整的一个系列知识,前面基本属于理论,原理的理解,接下来,我们就用学到的知识来实战下吧. 看看理解原理和理论是否重要?例子从简单到复杂 一.单体(字面量)封装加减乘除 ...
- [js高手之路] javascript面向对象写法与应用
一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...
- [js高手之路]打造通用的匀速运动框架
本文,是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的,在这篇文章的最后,我们做了2个小实例:侧边栏与改变透明度的淡入淡出效果,本文我们把上文的animate函数,继续改造,让变 ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- [js高手之路] html5 canvas动画教程 - 实时获取鼠标的当前坐标
有了前面的canvas基础之后,现在开始就精彩了,后面写的canvas教程都是属于综合应用,前面已经写了常用的canvas基础知识,参考链接如下: [js高手之路] html5 canvas系列教程 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
- [js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...
随机推荐
- svn文件回滚到某个历史版本号
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50819642 本文出自[我是干勾鱼的博客] 有时候想要将svn中的某个文件回滚到 ...
- 关于子线程更新UI
大家都了解的子线程不能更新UI,所以普通青年比方我,遇到耗时操作用到线程时.不得不立刻想到了用handler传递来解决UI更细的问题. 普通青年的做法: 方案:使用Thread+handler方式,h ...
- 杭电1513Palindrome
Palindrome Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- C#线程等待句柄
相互排斥对象 Mutex private Mutex m = new Mutex(); public void Method(){ m.WaitOne(); //运行操作 m.ReleaseMutex ...
- 给新手--安装tomcat后username和password设置以及项目怎么部署在tomcatserver上
安装后tomcatserver后.登陆首先就是让输入username和password.但是我们在安装tomcat的过程中好像没有让设置username和password,这时候可能有人就抓狂了.还有 ...
- RUP 方法简介
1.什么是RUP: Rational Unified Process(以下简称RUP) 是一套软件工程方法,主要由 Ivar Jacobson的 The Objectory Approch 和 The ...
- Java快速排序算法
快速排序算法思想: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一 ...
- dubbo2.5.6从下载到编译成功并且部署成功过程
本文基于dubbo2.5.6版本 原文链接:http://www.cnblogs.com/zhuwenjoyce/ 1,下载dubbo 首先从 github 下载源代码并阅读 readme ...
- springboot整合redis
springboot-整合redis springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置 一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿 ...
- 添加用户useradd,给用户设置修改密码passwd,修改用户信息usermod,修改用户密码状态chage,删除用户userdel,查询用户及组id,切换用户su,查看当前环境变量env
useradd 用户名 passwd 用户名,给指定用户设密码 passwd给当前用户设密码 添加一个用户系统会自动在以下文件或目录创建对应用户信息: [root@localhost ~]# grep ...