原生js运动框架
function getStyle(obj,name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,false)[name];
}
}
var timer=null;
function move(obj,what,target){
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var cur=0;
if(what=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj,what)));
}
else{
var cur=parseInt(getStyle(obj,what));
}
var speed=(target-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==target)
{
clearInterval(obj.timer);
}
else
{
if(what=='opacity')
{
obj.style.filter='alpha(opaity:'+(speed+cur)+')';
obj.style.opacity=(speed+cur)/100;
}
else
{
obj.style.width=cur+speed+'px';
}
}
},30);
原生js运动框架的更多相关文章
- 带无缝滚动的轮播图(含JS运动框架)
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- js运动框架之一条乱跑的虫子
克隆与运动框架的联合应用 效果:点击元素块后,元素块开始随机的向任何方向移动,并附带一堆颜色随机的"尾巴".每个方向运动3秒后改变方向,同时笑脸变哭脸. 如图所示: 朝某个方向运动 ...
- js 运动框架及实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js运动框架逐渐递进版
运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动 ...
- js运动框架之掉落的扑克牌(重心、弹起效果)
玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图: 这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉 ...
- js运动框架完成块的宽高透明度及颜色的渐变
了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色 ...
- js运动框架 step by step
开启setInterval定时器之前,请先清除之前的定时器 window.onload = function() { var btn = document.getElementById('btn'); ...
- JS运动框架的封装过程(一)
给大家出一道题,从起点A走到目的地B,一共用了1000毫秒,每一次是30毫秒,请问你在这里面得到了哪些信息? 信息有哪些呢? 第一个,总时长是:1000毫秒 第二个,多久时间走一次?30毫秒 第三个, ...
- 完美的js运动框架
//完美运动框架, 对象,json,函数function move(obj,json,funEnd){clearInterval(obj.timer);//清除定时器obj.timer= setInt ...
随机推荐
- Android IOS WebRTC 音视频开发总结(七一)-- H265/H264有何不同
本文整理自自网络,非原创,喜欢相关文章请关注我们的微信公众号:blackerteam H.265 H.265是ITU-TVCEG继H.264之后所制定的新的视频编码标准.H.265标准围绕着现有的视频 ...
- redis基础使用
redis分linux,window两个版本分支. redis在window下的使用先下载相关包.下载地址:https://github.com/MSOpenTech/redis/releases 下 ...
- C++多重继承子类和父类指针转换过程中的一个易错点
这两天有个C++新手问了我一个问题,他的工程当中有一段代码执行不正确,不知道是什么原因.我调了一下,代码如果精简下来,大概是下面这个样子: class IBaseA { public: ; int m ...
- MySQL5.7.10免安装版配置
最新版的 Mysql 不提供图形界面的安装了, 下载下来是一个压缩包的形式, 那么我们如何来使用它呢, 让它为我们工作呢? 环境: mysql-5.7.10-winx64 + win7(64位) 一 ...
- 记录今天学习python中for与while循环针对break和continue的用法
python中有两个主要的循环for与while,其中针对这两个循环有两种不同的中断用法break与continue. 首先先看下面的循环代码: 1: for i in range(10):#变量i带 ...
- android 多线程 示例
public class MyRun implements Runnable { int count = 1000; @Override public void run() { while (true ...
- java length size
1 java中的length属性是针对数组说的,比如说你声明了一个数组,想知道这个数组的长度则用到了length这个属性. 2 java中的length()方法是针对字符串String说的,如果想看这 ...
- CSS 知识汇总
1: inline-block 元素 IE6 7下只有 inline 的元素有 inline-block, 比如 span元素,如果要使其它元素有 inline-block,比如 div 有 in ...
- localstorage,sessionstorage使用
今天看了一下HTML5,也算是简单的学习一下吧,HTML5 提供了两种在客户端存储数据的新方法:localstorage,sessionstorage. localStorage - 没有时间限制的数 ...
- EAS linux挂载数据盘
查看数据盘名称 fdisk -l 假设没有挂载的数据盘为/dev/xvdb 格式化数据盘 mkfs.ext3 /dev/xvdb 添加自动挂载 mkdir /data echo '/dev/xvdb ...