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. (转)AspNetPager查询分页问题(点击页码,不再是查询后的数据集)viewstate解决

    public string SQL = "select * from Memorandum";       protected void Page_Load(object send ...

  2. Property与Attribute的区别

    Property属于面向对象的范畴----属性 Attribute则是编程语言文法层面的东西----特征          Property属于面向对象的范畴.在使用面向对象编程的时候,常常需要对客观 ...

  3. vector -1

    vector的特色有支持随机存取,在集合尾端增删元素很快,但是在集合中间增删元素比较费时. vector以模板(泛型)方式实现,可以保存任意类型的变数,包括使用者自定义的资料型态,例如:它可以是放置整 ...

  4. requirejs的配置

    baseUrl : 所有模块的查找根路径. 当加载纯.js文件(依赖字串以/开头,或者以.js结尾,或者含有协议),不会使用baseUrl. 如未显式设置baseUrl,则默认值是加载require. ...

  5. Android应用中MVP最佳实践

    转自:http://www.jianshu.com/p/ed2aa9546c2c 文/Jude95(简书作者)原文链接:http://www.jianshu.com/p/ed2aa9546c2c著作权 ...

  6. 有关service

    在symfony2 服务注入容器的时候参数语法可以是这样: cellcom.twig.menu_extension: class: Cellcom\WebBundle\Twig\Extension\M ...

  7. CSS3 transition 动画过度属性

    <!DOCTYPE html> <html> <head> <style>  div { width:100px; height:100px; back ...

  8. CSS实现背景透明/半透明效果的方法

    全透明代码:{background:transparent} 半透明代码:{filter:alpha(opacity=80);-moz-opacity:0.8;width:auto !importan ...

  9. 【4】python核心编程 第七章-映射和集合类型

    1.映射类型的相关函数 函数 操作 dict([container]) 创建字典的工厂函数.如果提供了容器类(container) , 就 用其中的条目填充字典,否则就创建一个空字典. len(map ...

  10. REDIS主从配置及切换

    最近公司项目也用上了.但有个点没有弄很明白. requirepass只是给CLIENT认证用的,还是同时给从REDIS认证用的?(masterauth) 一般的思路是主服务器不开AOF,从服务器打开A ...