基础运动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 ...
随机推荐
- Hadoop集群配置(最全面总结 )(转)
Hadoop集群配置(最全面总结) huangguisu 通常,集群里的一台机器被指定为 NameNode,另一台不同的机器被指定为JobTracker.这些机器是masters.余下的机器即作为Da ...
- git 本地仓库与远程仓库的连接
在远程如github新建一个项目名称为blog, 本地项目为store,是一个laravel框架项目,首先用 git init初始化本目,然后用git remote add origin git@gi ...
- PAT 1007 素数对猜想(20)
1007 素数对猜想(20 分) 让我们定义dn为:dn=pn+1−pn,其中pi是第i个素数.显然有d1=1,且对于n>1有dn是偶数."素 ...
- Numpy 索引
1.一维索引 >>> import numpy as np >>> A = np.arange(3,15) >>> print(A[3]) 6 & ...
- BZOJ1856或洛谷1641 [SCOI2010]生成字符串
BZOJ原题链接 洛谷原题链接 可以将\(1\)和\(0\)的个数和看成是\(x\)轴坐标,个数差看成\(y\)轴坐标. 向右上角走,即\(x\)轴坐标\(+1\),\(y\)轴坐标\(+1\),表示 ...
- laravel目录结构
- HttpURLConnection 返回汉字乱码(全是问号)
public static String doPost(String urlStr, Map<String, Object> paramMap) throws Exception { UR ...
- 【UI测试】--安全性
- js对象通过属性路径获取属性值 - getPropByPath
function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...
- java面试感悟【一】
我最终选择不包装工作经验,或许是因为我怂,或许是因为一些莫名其妙的坚持…… 然而结果就是在boss上沟通了20多家,只有7家让我投了简历,1家跟我说要我发个时间段给他稍后告诉我面试时间,然后就没有然后 ...