/*
* 事件绑定
*/
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的更多相关文章

  1. move.js运动插件

    move.js 运动插件是一款针对元素动画效果的插件.可以运用此插件制作出各类元素效果. 插件GitHub地址:https://github.com/visionmedia/move.js 下面整理学 ...

  2. move.js 源码 学习笔记

    源码笔记: /* move.js * @author:flfwzgl https://github.com/flfwzgl * @copyright: MIT license * Sorrow.X - ...

  3. 【干货】教你如何利用fullPage.js以及move.js插件打造高端大气的网站效果!

    前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可 ...

  4. 一款基础模型的JS打飞机游戏特效代码

    <!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码& ...

  5. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  6. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  7. 【基础篇】js对本地文件增删改查

    [基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查

  8. 【基础篇】js对本地文件增删改查--查

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

  9. 【基础篇】js对本地文件增删改查--改

    前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...

随机推荐

  1. Hadoop集群配置(最全面总结 )(转)

    Hadoop集群配置(最全面总结) huangguisu 通常,集群里的一台机器被指定为 NameNode,另一台不同的机器被指定为JobTracker.这些机器是masters.余下的机器即作为Da ...

  2. git 本地仓库与远程仓库的连接

    在远程如github新建一个项目名称为blog, 本地项目为store,是一个laravel框架项目,首先用 git init初始化本目,然后用git remote add origin git@gi ...

  3. PAT 1007 素数对猜想(20)

    1007 素数对猜想(20 分) 让我们定义d​n​​为:d​n​​=p​n+1​​−p​n​​,其中p​i​​是第i个素数.显然有d​1​​=1,且对于n>1有d​n​​是偶数."素 ...

  4. Numpy 索引

    1.一维索引 >>> import numpy as np >>> A = np.arange(3,15) >>> print(A[3]) 6 & ...

  5. BZOJ1856或洛谷1641 [SCOI2010]生成字符串

    BZOJ原题链接 洛谷原题链接 可以将\(1\)和\(0\)的个数和看成是\(x\)轴坐标,个数差看成\(y\)轴坐标. 向右上角走,即\(x\)轴坐标\(+1\),\(y\)轴坐标\(+1\),表示 ...

  6. laravel目录结构

  7. HttpURLConnection 返回汉字乱码(全是问号)

    public static String doPost(String urlStr, Map<String, Object> paramMap) throws Exception { UR ...

  8. 【UI测试】--安全性

  9. js对象通过属性路径获取属性值 - getPropByPath

    function getPropByPath(obj, path) { let tempObj = obj; path = path.replace(/\[(\w+)\]/g, '.$1'); pat ...

  10. java面试感悟【一】

    我最终选择不包装工作经验,或许是因为我怂,或许是因为一些莫名其妙的坚持…… 然而结果就是在boss上沟通了20多家,只有7家让我投了简历,1家跟我说要我发个时间段给他稍后告诉我面试时间,然后就没有然后 ...