使用js编写一个简单的运动框架
下班后，，没事捣鼓捣鼓个人的小爱好。
首先，说明我的这个运动框架(css所有属性)也是常见的框架一种，健壮性并不是太好，对于新手学习倒是挺好，，若是大神，老司机请拐弯。
上来，我们先定义一个区块，然后在关联一个可以实时看到属性值发生变化值的标签。
html：
<body>
<div id = "div1">
</div>
<input type = "text" id = "txt1">
</input>
</body>
css：
#div1{
width:200px;
height:200px;
position:absolute;
top:200px;
left:0px;
background-color:yellow;
opacity:0.3;
filter:alpha(opacity:30);
}
js：
首先，我们先写页面加载函数，因为我不是把函数直接绑定到元素上面的方式
//编写加载函数
window.onload = function(){
var oDiv = document.getElementById('div1');
//对标签进行鼠标上移事件绑定
oDiv.onmouseover = function(){
startMove(this , 'opacity',100);
};
//对标签进行鼠标离开事件绑定
oDiv.onmouseout = function(){
startMove(this, 'opacity',30);
};
};
//编写得到样式函数，因为我们需要对元素的css进行动画
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj, false)[attr];
};
};
//编写对标签元素进行控制的运动框架
function startMove(obj,attr,iTarget){
//上来先清除定时器，为什么自己可以试试看
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//先定义一个获取当前值的容器
var cur = 0;
//兼容透明度动画
if(attr == 'opacity'){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
cur = parseInt(getStyle(obj,attr));
}
//设置动画的步长
//让动画具有缓冲效果
var speed = (ITarget-cur)/6;
speed = speed>0?Math.ceil(apeed):Math.floor(speed);
//当动画需要的步长设置好，之后我们需要进一步判断我们的目标值，来进一步确认动画的开始和结束
if(cur == iTarget){
//如果到达了目标值，那么我们就清除动画，释放这个定时器，解放内存
clearInterval(obj.timer);
}
else{
//如果没有达到我们的目标值，那么我们需要这个动画一直持续下去，在这个动画的变化中，需要对透明度单独判断
if(attr == 'opacity'){
obj.style.opacity = (cur+speed)/100;
ob.style.filter = 'alpha(opacity:'+(cur+speed)+')';
document.getElementById('txt1').value = obj.style.opacity;
}
else{
obj.style[attr] = cur+speed+'px';
document.getElementById('txt1').value = obj.style.opacity;
}
}
},30);
}
使用js编写一个简单的运动框架的更多相关文章
- Python学习 - 编写一个简单的web框架（二）
在上一篇日志中已经讨论和实现了根据url执行相应应用,在我阅读了bottle.py官方文档后,按照bottle的设计重写一遍,主要借鉴大牛们的设计思想. 一个bottle.py的简单实例 来看看bot ...
- Python学习 - 编写一个简单的web框架（一）
自己动手写一个web框架,因为我是菜鸟,对于python的一些内建函数不是清楚,所以在写这篇文章之前需要一些python和WSGI的预备知识,这是一系列文章.这一篇只实现了如何处理url. 参考这篇文 ...
- 利用js编写一个简单的html表单验证，验证通过时提交数据(附源码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- koa2源码解读及实现一个简单的koa2框架
阅读目录 一:封装node http server. 创建koa类构造函数. 二:构造request.response.及 context 对象. 三:中间件机制的实现. 四:错误捕获和错误处理. k ...
- 使用Java编写一个简单的Web的监控系统cpu利用率，cpu温度，总内存大小
原文:http://www.jb51.net/article/75002.htm 这篇文章主要介绍了使用Java编写一个简单的Web的监控系统的例子,并且将重要信息转为XML通过网页前端显示,非常之实 ...
- javascript编写一个简单的编译器(理解抽象语法树AST)
javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...
- 用Python编写一个简单的Http Server
用Python编写一个简单的Http Server Python内置了支持HTTP协议的模块,我们可以用来开发单机版功能较少的Web服务器.Python支持该功能的实现模块是BaseFTTPServe ...
- 如何实现一个简单的MVVM框架
接触过web开发的同学想必都接触过MVVM,业界著名的MVVM框架就有AngelaJS.今天闲来无事,决定自己实现一个简单的MVVM框架玩一玩.所谓简单,就是仅仅实现一个骨架,仅表其意,不摹其形. 分 ...
- 如何编写一个简单的Linux驱动（二）——设备操作集file_operations
前期知识 如何编写一个简单的Linux驱动(一)--驱动的基本框架 前言 在上一篇文章中,我们学习了驱动的基本框架.这一章,我们会在上一章代码的基础上,继续对驱动的框架进行完善.要下载上一篇文章的全部 ...
随机推荐
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- Python迭代器，生成器--精华中的精华
1. 迭代器 迭代器是访问集合元素的一种方式.迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器只能往前不会后退,不过这也没什么,因为人们很少在迭代途中往后退.另外,迭代器的一大 ...
- GitHub Desktop客户端打开文件乱码问题解决方案
今天在使用GitHub Desktop客户端的时候,发添加本地仓库后文件内容显示为乱码. 1.现象 如下图所示: 2.原因分析 后来分析得知原来是由于编码不统一造成 的. 具体来说,我在window ...
- NDK各个版本链接
ndk_r15c (July 2017) Windows 32-bit : https://dl.google.com/android/repository/android-ndk-r15c-wind ...
- Jmeter的安装和启动时出现unable to access jarfile apachejmeter.jar error value=1错误处理
Jmeter是纯Java开发的, 能够运行Java程序的系统一般都可以运行Jmeter, 如:Windows. Linux. mac等. 由于是由Java开发,所以自然需要jdk环境. Windows ...
- 记住密码"功能的正确设计
Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...
- Python自学笔记-面向对象相关（Mr seven）
---恢复内容开始--- http://www.cnblogs.com/wupeiqi/articles/5433893.html 类的成员可以分为三大类:字段.方法和属性. 一.字段 字段包括:普通 ...
- java web mysql 入门知识讲解
MySQL学习笔记总结 一.SQL概述: SQL:Structured Query Language的缩写(结构化查询语言) SQL工业标准:由ANSI(ISO核心成员) 按照工业标准编写的SQ ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- Java加密与解密笔记(一) Base64和数据摘要算法
对加密解密下面的内容一定要先理解: 甲乙双方要通信,中间的连接可能被人窃听甚至篡改.解决办法就是把传输的内容进行加密,用密文去传输,这样即使被监听也没办法知道信息的具体内容. 加密时,甲乙双方可以约定 ...