/*
* 事件绑定
*/
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. Linux系统挂载只读改成读写

    1.mount命令可用于查看哪个模块输入只读,一般显示为: [root@localhost ~]# mount /dev/cciss/c0d0p2 on / type ext3 (rw) proc o ...

  2. Linux下打开超大文件方法

    在Linux下用VIM打开大小几个G.甚至几十个G的文件时,是非常慢的. 这时,我们可以利用下面的方法分割文件,然后再打开. 1 查看文件的前多少行 head -10000 /var/lib/mysq ...

  3. Echart实现多个y轴,坐标轴的个数及名称由后台传过来的json数据决定。

    yAxis: function(){ var yAxis=[]; for(var i=0;i<legend1.length;i++){ var item={ name:legend1[i], t ...

  4. BOM DOM jQuery

    . BOM . location相关 . location.href . location.href="http://www.sogo.com" . location.reload ...

  5. ofo退押金脚本

    同事钉钉给的 因为押金一直没退,电话很难打进去,咨询客服排队要等好久,一直几千位. 长时间挂机就自动退出客服了,所以自动写了一个脚本,目前已经成功退押金了.所以共享出来 1.关注ofo小黄车订阅号,注 ...

  6. Numpy array分割

    1.纵向分割 >>> import numpy as np >>> A = np.arange(12).reshape((3, 4)) >>> p ...

  7. (O)web缓存

    为什么要用缓存 一般针对静态资源如CSS,JS,图片等使用缓存,原因如下: 请求更快:通过将内容缓存在本地浏览器或距离最近的缓存服务器(如CDN),在不影响网站交互的前提下可以大大加快网站加载速度. ...

  8. spring自动注解Autowired配置

    1.spring注解:http://blog.csdn.net/xyh820/article/details/7303330/ 2.最简ssm配置:http://blog.csdn.net/qq_18 ...

  9. Luogu 2173 [ZJOI2012]网络 - LCT

    Solution $LCT$ 直接上$QuQ$ 注意$cut$ 完 需要 $d[u + c * N]--$ 再  $link$,  不然会输出Error 1的哦 Code #include<cs ...

  10. day2-pycharm创建项目,driver下载和浏览器设置

    对于ie需要设置,才能使用ie做测试 火狐的使用不能超过43版本,ie11现在有多次弹出alert无法识别其内容的问题 https://github.com/SeleniumHQ/selenium/w ...