原生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 ...
随机推荐
- 通知 Notification
1. NotificationManager ma=(NotificationManager) context.getSystemService(context.NOTIFICATION_SERVIC ...
- Jvm支持的最大线程数
摘自 http://blog.csdn.net/xyls12345/article/details/26482387 JVM最大线程数 (2012-07-04 23:20:15) 转载▼ 标签: jv ...
- React子组件与父组件传值
一 子组件向父组件传值 //子组件var Child = React.createClass({ render: function(){ return ( <div> 请输入邮箱:< ...
- 程序的删除kill、killall
发送信号给程序,或者列出信号集 SYNOPSIS kill [-s SIGNAL | -SIGNAL] PID... kill -l [SIGNAL]... 1.信号操 ...
- LinQ 基础
LinQ全名:Linq to Sql,是一种数据库访问技术 常见的数据库访问技术: 1.ADO.NET 2.Entity Framework 框架 3.LinQ LinQ是高集成化的数据访问类,它会 ...
- 《Linux内核设计与实现》读书笔记 第二章 从内核出发
一.获取内核源码 1. Git git实际上是一种开源的分布式版本控制工具. Linux作为一个开源的内核,其源代码也可以用git下载和管理 - 获取最新提交到版本树的一个副本 - $ git clo ...
- 循序渐进Python3(三) -- 3 -- 内置函数
上一篇我们又介绍了26个Python内置函数.现回忆一下吧: 1.all 2.any 3.ascii 4.bin 5.bool 6.bytes 7.bytearray 8.callable 9.chr ...
- The certificate used to sign “AppName” has either expired or has been revoked. An updated certificate is required to sign and install the application解决
问题 The certificate used to sign "AppName" has either expired or has been revoked. An updat ...
- laravel遇到的问题
这是由于访问laravel项目报错的,解决几种可能出现的错误. 1)打开:D:\java\wamp\www\subway\app\config\app.php 修改:'debug' => tru ...
- 读取当前键值,并赋值给LED
/********************************* 代码功能:读取当前键值,并赋值给LED 使用函数: digitalRead(数字输入端口号); 创作时间:2016*10*07 作 ...