基础运动move.js
/*
* 事件绑定
*/
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on' + ev,fn);
}else{
obj.addEventListener(ev,fn,false);
}
}
/*
* 获取样式值
*/
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
} /*
* 缓冲运动特效函数
*/
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(speed) : Math.floor(speed);
if(cur == iTarget) {
clearInterval(obj.timer);
} else {
if(attr == 'opacity') {
obj.style.filter = 'Alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100; document.getElementById('txt1').value = obj.style.opacity;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
}, 30);
}
/*
* 完美缓冲运动特效函数
*/
function startMove1(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true; //假设所有的值都已经到了
for(var attr in json){
var cur = 0;
if(attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(cur != json[attr]){
bStop = false;
} if(attr == 'opacity') {
obj.style.filter = 'Alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100; document.getElementById('txt1').value = obj.style.opacity;
} else {
obj.style[attr] = cur + speed + 'px';
}
} if(bStop){
clearInterval(obj.timer);
if(fnEnd){
fnEnd();
}
}
}, 30);
}
基础运动move.js的更多相关文章
- move.js运动插件
move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...
- move.js 源码 学习笔记
源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X - ...
- 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果!
前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...
- 一款基础模型的JS打飞机游戏特效代码
<!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...
- javascript基础入门之js中的结构分支与循环语句
javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...
- javascript基础入门之js中的数据类型与数据转换01
javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM) js中的打印语句: 数据类型 变量 ...
- 【基础篇】js对本地文件增删改查
[基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查
- 【基础篇】js对本地文件增删改查--查
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--改
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
随机推荐
- how2j网站前端项目——天猫前端(第一次)学习笔记8
其他页面的学习 这些页面有1.查询结果页 2.支付页面 3.支付成功页面 4.确认收货页面上 5.确认收货页面下 6.收获成功页面 7.评价页面上 8.评价页面下 9.登陆页面 10.注册页面 1.查 ...
- Android View 深度分析requestLayout、invalidate与postInvalidate
前言 前几篇文章中,笔者对View的三大工作流程进行了详细分析,而这篇文章则详细讲述与三大工作流程密切相关的两个方法,分别是requestLayout和invalidate,如果对Viwe的三个工作流 ...
- 比特币学习-Transaction的locktime属性
Locktime, also known as nLockTime from the variable name used in the reference client, defines the e ...
- 24.Mysql高级安装和升级
24.Mysql高级安装和升级24.1 Linux/Unix平台下的安装 24.1.1 安装包比较Linux下的Mysql安装包分为RPM包.二进制包.源码包3种.RPM包优点是安装简单,适合初学者: ...
- 4A - 排序
输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整数就是由若干个‘0’组成的,这时这个整数 ...
- IIS 域名 带参数 设置重定向
IIS里面设置重定向后,经常会出现,从百度快照里直接打不开的情况. 可以在IIS里面设置重定向的时候,把参数加上,格式如下: http://www.***.com%S%Q
- Array Division 808D
D. Array Division time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- 02. pt-archiver
pt-archiver \--source h=192.168.100.101,P=3306,u=admin,p='admin',D=db01,t=t01 \--dest h=192.168.100. ...
- vim 中将 TAB 换成 4 个空格
最近开始学习Python,其语法简单,但是对代码格式要求比较严格.代码采用缩进方式,按照约定采用4个空格的缩进. Linux下配置vim编辑器中Tab键为4个空格方法: 1. 编辑文件: vi /et ...
- On the internet, nobody known you are a dog !