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. let关键字

    作用: 与var类似, 用于声明一个变量特点: 只在块作用域内有效 不能重复声明 不会预处理, 不存在提升应用: 循环遍历加监听 //应用实例 <body> <button>测 ...

  2. IP地址基础和子网规划之其一

    IP地址的介绍:在TCP/IP环境中,各种各样的终端.工作站能同服务器.其他工作站无缝连接,是因为每一网络节点都使用了全网范围内能够唯一标识节点的IP地址.每个网络有一个全网唯一的网络号,在该网络中各 ...

  3. struts 2 --SEVERE: Could not find action or result

    SEVERE: Could not find action or result There is no Action mapped for namespace / and action name . ...

  4. mysql update语句,修改字段,,或者是批量修改字段

    更新一个字段,在它的后面加一个字符串,不查询数据库得到这个字段值 怎么添加?? 例如: 我的test表,有个user字段,我现在想在它后面加了另一个用户的名字 我在mysql数据库这样写 UPDATE ...

  5. FCKeditor 插件开发 示例

    (FCKeditor.地址是:http://www.fckeditor.net/.我下载的版本是:2.6.3.)What ?FCKeditor一直是web上编辑器的比较好的一个选择,他是开源的,而且效 ...

  6. POJ3041 二分图最大匹配

    问题:POJ3041 分析: 构造二分图:令A = B = { 1, 2, ... , n }, 分别代表行号集与列号集.假如第i行第j列有一颗行星,则连接Ai与Bj, 表示必须从Ai(即第i行),B ...

  7. 关于sublime3的配置笔记

    1.安装的插件有Anaconda, GitGutter, SublimeCodeIntel Anaconda会有长度超过80警报的问题, 影响写代码的时候的判断, 所以将Preferences/Pac ...

  8. 畅通工程续--hdu1874

    畅通工程续 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  9. html5画饼形图

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx ...

  10. 采购术语PR、PO、RFQ、RFI、SOW、BOM、JIT、VMI、MRO 是什么意思

    PO:Purchase Order Form 采购订单,公司对外使用,还有个PR: ,公司内部使用的采购申请单 PR (Purchase Requirent) 请购单,采购申请单,代表企业内部的申请需 ...