要实现的效果如下:
鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~
(且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~
----------------------------------------------------js代码如下 -----------------------------------------------------
//执行函数
window.onload = function(){
//声明控制变量
var aDiv = document.getElementsByTagName('div');
//遍历
for(var i=0;i<aDiv.length;i++){
//添加自定义属性
aDiv[i].timer = null;
//添加事件(由于每个具体事件是不同的,所以单独来控制)
aDiv[0].onmouseover = function(){
moveStart(this,'width',400);
}
aDiv[0].onmouseout = function(){
moveStart(this,'width',200);
}
aDiv[1].onmouseover = function(){
moveStart(this,'height',400);
}
aDiv[1].onmouseout = function(){
moveStart(this,'height',200);
}
aDiv[2].onmouseover = function(){
moveStart(this,'opacity',100);
}
aDiv[2].onmouseout = function(){
moveStart(this,'opacity',30);
}
}
}
//getStyle 获取对象的全局style属性
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle;
}
else{
return getComputedStyle(obj,false)[name];
}
}
//moveStart 运动函数
function moveStart(obj,attribute,iTarget){
//多个物体运动框架
clearInterval(obj.timer);
obj.timer = setInterval(function(){
//声明
var current = 0;
if(attribute == 'opacity'){
current = parseFloat(getStyle(obj,attribute))*100;
}
else{
current = parseInt(getStyle(obj,attribute));
}
//缓冲速度
var speed = (iTarget - current )/4;
//上下取整
speed = speed>0? Math.ceil(speed):Math.floor(speed);
//静
if(iTarget == current){
clearInterval(obj.timer);
}
else{
if(attribute == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
obj.style.opacity = (current + speed)/100;
}
else{
obj.style[attribute] = current+speed+'px';
}
}
},30);
}
---------------------------------------------------------------------------------
js的学习也有大半月了,进度还是很缓慢~~ 慢慢来了,还是基本功,编程基础不扎实, 慢慢来了~~
在原有学习计划上, 减少点打酱油时间, 多点看书事件,把js基础先补补~~
js入门学习~ 运动应用小例的更多相关文章
-
JS入门学习,写一个时钟~
<!-- 耽搁了几天,于是又继续回到JS的学习了~~ 各种头大,加油吧... --> <!doctype html><html><head> <t ...
-
测试驱动开发(TDD)及测试框架Mocha.js入门学习
组里马上要转变开发模式,由传统的开发模式(Developer开发,QA测试),转变为尝试TDD(Test-driven development,测试驱动开发)的开发模型.由此将不存在QA的角色,或者仅 ...
-
微信小程序开发入门学习(1):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局 程序达到的效果 猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
-
Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
-
require.js 入门学习 (share)
以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...
-
react webpack.config.js 入门学习
在学习react 的时候必然会用到webpack打包工具,webpack的快速入门另外一篇文章中有记录,这里只记录webpack.config.js文件,因为每个项目下都必须配置,通俗的讲,它的作用就 ...
-
【带着canvas去流浪(11)】Three.js入门学习笔记
目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址: ...
-
JS入门学习,编写一个简易月历
//今天最头疼的地方在于 getElementsByClassName()的 [] ~~ //错了N遍后只能说有点点头绪,如果不加[] 查找的就是全部吧 加上[]能精确控制的标签或者class < ...
-
JS入门学习,写一个简单的选项卡
/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞 ...
随机推荐
-
Inventory Costing in AX 2009
I wanted to explore some scenarios that illustrate a few important concepts related to inventory cos ...
-
easyuidatagrid中load,reload,loadData的区别。
摘要:datagrid中有load,reload,loadData那三个方式,皆是加载数据的,但又有差别.下面让我们一起来看看: 首先,load方法,比如我已经定义一个datagrid的id为grid ...
- db2工具优化
-
[每天一道A+B]签到检测程序
签到检测程序,解析github提供的api内的json,解决了服务器和本地时间不同步的问题(时差+8H),实现按日期更新当前签到表.下一步是从api获取organization的信息,求出未签到的成员 ...
-
linux 压缩/解压命令大全
.tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.gz解压1:gun ...
-
成为Java GC专家(3)—如何优化Java垃圾回收机制
为什么需要优化GC 或者说的更确切一些,对于基于Java的服务,是否有必要优化GC?应该说,对于所有的基于Java的服务,并不总是需要进行GC优化,但前提是所运行的基于Java的系统,包含了如下参数或 ...
-
使用sui实现的选择控件【性别、日期、省市级联】
使用sui mobile做的选择控件,其中sm.js有修改,增加自定义api,详情请看index.html的注释,不多说了,上代码 <!DOCTYPE html> <html> ...
-
管理 MariaDB 用户账户
哪些用户可以连接到MariaDB 服务器,他们都可以从哪些地方连接,连接到服务器后又能够做什么等,都是本文将涉及到的内容. 用户的权限信息都保存在 mysql 库中的几个权限表中.对 MariaDB ...
-
Docker -d : Running modprobe bridge nf_nat failed with message: exit status 1
nf_nat 是做什么用的 - DockOne.iohttp://dockone.io/question/1384 docker-py的配置与使用 - openxxs - 博客园http://www. ...
-
go web framework gin middleware 设计原理
场景:一个middleware可以具体为一个函数,而由前面的gin 路由分析可得,每一个路径都对有一个HandlersChain 与其对应. 那么实际上增加一个middleware的过程,就是将每一个 ...