简单清晰的缓冲运动框架-白红宇

简单清晰的缓冲运动框架

阅读量：6074 次

发布时间：2019-06-20

本文共 1551 字，大约阅读时间需要 5 分钟。

TestMove.js

View Code

function getStyle(obj, attr) {    if (obj.currentStyle) {        return obj.currentStyle[attr];    }    else {        return getComputedStyle(obj, false)[attr];    }}function startMove(obj, json, fn) {    clearInterval(obj.timer);    obj.timer = setInterval(function () {        var bStop = true; //停止运动的标记        for (var attr in json) {            var iCurr = 0;            //获取当前的值            if (attr == 'opacity') {                iCurr = parseInt(Math.round(parseFloat(getStyle(obj, attr)) * 100));            }            else {                iCurr = parseInt(getStyle(obj, attr));            }            //计算速度            var iSpeed = (json[attr] - iCurr) / 8;            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);            //检测是否停止            if (iCurr != json[attr]) {                bStop = false;            }            //设置属性            if (attr == 'opacity') {                obj.style.filter = 'alpha(opacity:' + iCurr + iSpeed + ')';                obj.style.opacity = (iCurr + iSpeed) / 100;            }            else {                obj.style[attr] = iCurr + iSpeed + 'px';            }        }        if (bStop) {            clearInterval(obj.timer);            if (fn) {                fn();            }        }    }, 30);}

TestMove.html

1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebApplication5.WebForm3" %> 2  3  4  5  6  7      8     18     19     24 25 26     
     
      27     
      
       28     29     
      
30     
     
31 32