js入门学习~ 运动应用小例
要实现的效果如下:
鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~
(且各运动相互之前不干扰) 主要是练习多个物体的运动框架~~
----------------------------------------------------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什么的字母别搞 ...
随机推荐
- 前端学HTTP之缓存
前面的话 Web缓存是可以自动保存常见文档副本的HTTP设备.当Web请求抵达缓存时,如果本地有“已缓存的”副本,就可以从本地存储设备而不是原始服务器中提取这个文档.本文将详细介绍缓存的相关内容 功能 ...
- NET Core-学习笔记(一)
.net core最近园子讨论频率很高的话题,从不久前发布正式版本后,也是开始从netcore官网一步一步走向学习之路:.net跨平台的设计让人很是兴奋起来,因为做了多年的互联网研发者,见识了很多一流 ...
- 梯度提升树(GBDT)原理小结
在集成学习之Adaboost算法原理小结中,我们对Boosting家族的Adaboost算法做了总结,本文就对Boosting家族中另一个重要的算法梯度提升树(Gradient Boosting De ...
- 制作自己的MVC框架(三)——应用
一.数据库操作 目前封装了两种数据库,“MongoDB”和“MySQL”,用到了一次接口“IDatabase.php”. namespace library\db; interface IDataba ...
- ASP.NET Core 中文文档 第三章 原理(1)应用程序启动
原文:Application Startup 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:谢炀(kiler398).许登洋(Seay) ASP.NET Core 为你的应用程 ...
- 使用C#代码生成一个随机的UUID
在日常开发中常见于生成主键的ID,比较规范好用,详细代码如下(写注释是个好习惯): using System;using System.Collections.Generic;using System ...
- 【Java每日一题】20161228
package Dec2016; import java.util.ArrayList; import java.util.List; public class Ques1228 { public s ...
- C++ STL简述
前言 最近要找工作,免不得要有一番笔试,今年好像突然就都流行在线笔试了,真是搞的我一塌糊涂.有的公司呢,不支持Python,Java我也不会,C有些数据结构又有些复杂,所以是时候把STL再看一遍了-不 ...
- MVC跨项目路由
我们在实际应用开发中,经常遇到多人共同开发维护同一个项目情况,所以不免会出现其中一个人代码出现bug质量问题导致整个项目就原地“爆炸”的惨状.在之前公司经常遇到某个人忘记更新(我就做个此事[" ...
- SpringMVC类型转换器、属性编辑器
对于MVC框架,参数绑定一直觉得是很神奇很方便的一个东西,在参数绑定的过程中利用了属性编辑器.类型转换器 参数绑定流程 参数绑定:把请求中的数据,转化成指定类型的对象,交给处理请求的方法 请求进入到D ...