function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for (attr in json) { var icur = 0;
icur = (attr == 'opacity') ? Math.round(getStyle(obj, attr) * 100) : parseInt(getStyle(obj, attr));
var iSpeed = (json[attr] - icur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if (icur != json[attr]) {
bStop = false;
}
if (attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (icur + iSpeed) + ')';
obj.style.opacity = (icur + iSpeed) / 100;
} else {
obj.style[attr] = icur + iSpeed + 'px';
} }
if (bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
} } }, 30);
} //获取样式内的属性
function getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

  

javascript 切换动画的更多相关文章

  1. jQuery Mobile 连接外部连接或切换动画

    jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/Bl ...

  2. javascript帧动画

    前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...

  3. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

  4. "Javascript高性能动画与页面渲染"笔记

    前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...

  5. 深入理解requestAnimationFrame并实现相册组件中的切换动画

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/12529885.html,多谢,=.=~ (如果对你有帮助的话请帮我点个赞啦) 通常情况下,我们利 ...

  6. Javascript - Vue - 动画

    动画状态类名 vue动画通过将需要执行动画的标签放入transition标签中,再通过设置预置的vue动画类名的css样式来控制动画的呈现效果. 开场动画状态的三个类名 v-enter:动画开始之前的 ...

  7. uwp 图片切换动画

    最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...

  8. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  9. Android Activity 切换动画(非原创)

    在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity ...

随机推荐

  1. 使用date转换UNIX时间戳

    1.将time string转换成时间戳 date -d "2010-10-12 12:25:00" +%s 2.将时间戳转换成time string date -d " ...

  2. mysql的锁--行锁,表锁,乐观锁,悲观锁

    一 引言--为什么mysql提供了锁 最近看到了mysql有行锁和表锁两个概念,越想越疑惑.为什么mysql要提供锁机制,而且这种机制不是一个摆设,还有很多人在用.在现代数据库里几乎有事务机制,aci ...

  3. (转)[老老实实学WCF] 第二篇 配置WCF

    在上一篇中,我们在一个控制台应用程序中编写了一个简单的WCF服务并承载了它.先回顾一下服务端的代码: using System; using System.Collections.Generic; u ...

  4. performSelector的方法

    在此我对performSelector系列方法进行了总结 1. - (id)performSelector:(SEL)aSelector; - (id)performSelector:(SEL)aSe ...

  5. sqlserver2005重新安装(安装汇编错误,安装程序无法连接到数据库服务进行服务配置)

    2014-01-09 16:41 1687人阅读 评论(1) 收藏 举报 分类: 数据库(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. sqlserver2005重新安装(安装汇编错误, ...

  6. C#如何获得本地电脑IP

    using System; using System.Collections.Generic; using System.Text; using System.Net;   //需要引用.Net命名空 ...

  7. NPOI导入导出Excel

    .net mvc利用NPOI导入导出excel 注意:如何导出的提交方式ajax导出是失效的! 解决方案是:js处理l两个表单的提交  代码:  第一步. 在页面里面加入2个隐藏的iframe, 如下 ...

  8. Struts2+Spring3+Hibernate3+Maven构建(基于Eclipse)

    长时间不做后台了,整理一下资料,以便翻阅. Eclipse.JDK安装略…… Maven下载地址:http://maven.apache.org/download.cgi 版本比较新的Eclipse基 ...

  9. Codeforces Round #302 (Div. 1)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud A. Writing Code Programmers working on a ...

  10. 三组I/O复用模型的比较

    概论: select.poll和epoll三组I/O复用系统调用,这3组系统调用都能同时监听多个文件描述符.它们将等待由timeout参数指定的超时时间,直到一个或者多个文件描述符上有事件发生时返回. ...