基础运动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 ...
随机推荐
- linux服务器搭建
centos7 java web项目环境搭配 2018年07月19日 17:20:21 阅读数:25 首先进行系统安装,此处不进行详细介绍,自行百度安装 一.配置ip地址信息 1.进入/etc/sys ...
- Composer 安装以及使用方法
Composer 是 PHP 的一个依赖管理工具.它允许你申明项目所依赖的代码库,它会在你的项目中为你安装他们. Linux 下安装 curl -sS https://getcomposer.org/ ...
- 线特征---LSD and LBD程序运行(一)
最近在看有关特征提取的线特征,暑期就看了相关的论文:<基于点线综合特征的双目视觉SLAM方法_谢晓佳>,最近呢,把里面有关线特征提取LSD和描述子LBD的代码跑了一遍,记录如下: [1]L ...
- rbac集成 权限分配。之角色管理
权限分配功能拆分: a. 角色管理 b. 用户管理 c. 菜单和权限的管理 d. 批量的权限操作 e. 分配权限 先实现 角色管理: 无非也就是,增删改查: 定义路由, 编写视图. 1.查看角色页面: ...
- CSS-calc 兼容写法
width: 90%;/*写给不支持calc()的浏览器*/ width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - ( ...
- 开启Windows文件共享必须开启的两个服务
开启Windows文件共享必须开启的两个服务分别是: 1.Server服务. 2.Workstation服务. 如果文件共享丢失,可以去首先去查看这两个服务是否停止,如果停止,请启动或者重启.
- git 标签管理
发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...
- ES6解构赋值的应用场景
一.变量交换 1.ES6的方式 { let a=; let b=; [a,b]=[b,a]; console.log(a,b); } 输出为 2.ES5的方式 采用中间变量的方式进行存储 二.获取函数 ...
- gulp ( http://markpop.github.io/2014/09/17/Gulp入门教程 )
前言 最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用Gulp Gulp基于Node.j ...
- 转录组分析综述A survey of best practices for RNA-seq data analysis
转录组分析综述 转录组 文献解读 Trinity cufflinks 转录组研究综述文章解读 今天介绍下小编最近阅读的关于RNA-seq分析的文章,文章发在Genome Biology 上的A sur ...