javascript 切换动画

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];
	}
}

  

时间: 2024-11-29 12:14:55

javascript 切换动画的相关文章

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

jQuery Mobile不同网页之间的跳转问题 jQuery Mobile,一个新的手机终端脚本开发库,从名字可以看出,它是基于jQuery:目前支持很多种手机设备,包括IOS/Android/BlackBerry/Windows Phone等,当然,支持程度不一,具体可以看:http://jquerymobile.com/gbs/ 由于这项目比较新,在我写这文章的时候,目前还是1.0 ALPHA4.1 RELEASED版,官网提供下载的只有jQuery Mobile的JS和CSS,相关文档目

CSS切换动画Transition应用到新创建dom不起作用

transition在新创建的dom上,无法立即生效,因为css会被合并计算,所以要看到动画效果,必须将切换css代码放入到setTimeout函数内,异步运行才可以. 示例代码:调用两个函数,分别创建顶部滑入.底部滑入动画,第一个不使用setTimeout.第二个使用setTimeout函数,可以明显看出差别. html代码: <!DOCTYPE html> <html>     <head>         <meta charset="utf-8&

&quot;Javascript高性能动画与页面渲染&quot;笔记

前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗易懂.so……笔记诞生 1.fps -frame per second 帧 页面是每一帧变化都是系统绘制出来的(GPU或者CPU).但这种绘制又和PC游戏的绘制不同,它的最高绘制频率受限于显示器的刷新频率(而非显卡),所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second,

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

一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明度opacity设为1,显示出来: (2)“动态” var component = Qt.createComponent("Page1.qml").createObject(container,{width:100,heisght:100): 创建一个基于“Page1.qml”的组件,在组

viewPager的切换动画

今天在看苏州通的代码,里面有个引导的代码,涉及到viewPager的切换动画: DepthPageTransformer : 1 package com.soyoungboy.guide; 2 import android.annotation.TargetApi; 3 import android.os.Build; 4 import android.support.v4.view.ViewPager; 5 import android.view.View; 6 /** 7 * 8 * @Cl

彩色TabBar切换动画实现

彩色TabBar切换动画实现 无意间看到一个彩色TabBar切换的设计图,感觉很不错,有空就把他实现了. 环境信息 Mac OS X 10.10.4 Xcode 6.4 iOS 8.4 效果图: 源码下载地址: https://github.com/saitjr/TColorfulTabBar.git 一.实现分析 看到这个彩色切换效果的时候,我第一个反应就是在TabBar上有一个彩色的View,然后每个色块的显示都是通过mask来显示的.最终,我的具体实现也是根据这个思路来的. 1. 设计思想

Android Activity的切换动画(overridePendingTransition)

overridePendingTransition 1.平时Activity的切换是就是从中间弹出来,然后遮盖住之前的Activity.这种效果看到很多后就想给他换成其他的效果,如: 要显示的Acitvity从左边往右的平移进入,被遮盖的Activity从左往右的平移划出. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity增加了一个方法: pub

iOS 自定义页面的切换动画与交互动画

在iOS7之前,开发者为了寻求自定义Navigation Controller的Push/Pop动画,只能受限于子类化一个UINavigationController,或是用自定义的动画去覆盖它.但是随着iOS7的到来,Apple针对开发者推出了新的工具,以更灵活地方式管理UIViewController切换. 自定义导航栏的Push/Pop动画 为了在基于UINavigationController下做自定义的动画切换,先建立一个简单的工程,这个工程的rootViewController是一个

activity切换动画和页面切换动画

Activity切换动画 要实现Activity切换动画需要靠overridePendingTransition来实现,里面有两个参数分别是进入Activity时的动画和离开Activity时的动画. 需要注意的是必须在StartActivity()或finish()之后立即调用 比如在MainActivity中有一个Button,点击Button后跳转到OtherActivity中代码如下: Intent intent = new Intent(this, OtherActivity.clas