完美版—缓冲运动框架

//末尾有获取当前样式的方法function startMove(obj,json,endFn){
        clearInterval(obj.timer);
        obj.timer = setInterval(function(){
            var bBtn = true;
            for(var attr in json){
                var iCur = 0;
                if(attr == ‘opacity‘){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }

                var iSpeed = (json[attr] - iCur)/8;

            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = 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(bBtn){
                clearInterval(obj.timer);

                if(endFn){
                    endFn.call(obj);
                }
            }

        },30);
    }
//获取当前样式
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }
时间: 2024-08-04 17:28:26

完美版—缓冲运动框架的相关文章

js--链式缓冲运动框架

这些框架都是鄙人自学的网上视频,至于是哪家,想必大家都知道的,当然不纠结这个,最主要的是学习的过程和结果,甚至于你理解,掌握了没有 网上有很多的开源框架,很佩服他们的思路和写法,或许这就是代码之美吧 我一个小小的前台,做界面的,现在也要去学习设计思路了,毕竟你拿工资的多少和你掌握技能的多少.深度是成正比的 当然更要相信 努力必有回报,坚持一定成功 以下是更新的学习运动框架的进度和代码 更新时间:2014-12-11 js框架---缓冲链式运动--已经掌握 1 //运动框架 2 //author:

缓冲运动框架

/** * Created by Lenovo on 2016/9/11. */ function show(ele){ ele.style.display = "block"; } /** * 获取元素样式兼容写法 * @param ele * @param attr * @returns {*} */ function getStyle(ele,attr){ if(window.getComputedStyle){ return window.getComputedStyle(el

时间版运动框架

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content

关于所有运动框架总结

下面总结一下这几天学习关于运动框架的总结: [1]匀速运动框架 startMove(itarget) [2]缓冲运动框架 startMove(obj, iTarget) [3]任意值运动框架 startMove(obj, attr, iTarget) [4]链式运动框架 startMove(obj, attr, iTarget, fn) function  getStyle(obj,attr)//用此种方法获取样式中的属性 { if(obj.currentStyle) { return obj.

js运动框架逐渐递进版

运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动 (第一部分):匀速运动 运动基础 思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setInterval(函数,交

2015.8.2js-19(完美运动框架)

1 /*完美运动框架*/ 2 //1.先清除定时期,2,获取样式,如果是opacity则单独解决,3,定义速度,4,定义当前值是否到达目的地,5,判断当前值是否到达目的地,6运动基本,如果是opacity 3 function startMove(obj,json,fnEnd){ 4 clearInterval(obj.timer); 5 obj.timer = setInterval(function(){ 6 var bStop = true; //假设所有的属性都达到目标值 7 for(a

JS 之完美运动框架

完美运动框架是对原来的任意值运动框架的改善和效率的提升,即利用了json对属性进行封装,从而提高效率: window.onload=function(){ var oDiv=document.getElementsByTagName('div')[0]; oDiv.onmouseover=function(){ move(this,{width:200,height:200}); } } function getStyle(obj,attr){ if (obj.currentStyle) { r

JS的完美运动框架

function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } //注意:在多物体运动框架中,所有东西都不能公用 !否则出问题,BUG:将必要的变量加到物体的属性中就行.即:属性与运动对象绑定:速度.其他属性值(如透明度等等) function startMove(obj, jso

完美运动框架(js)

一.前言 学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){ clearInterval(obj.timer);//若物体之前开有定时器则先关闭 obj.timer = setInterval(function(){ var bStop = true; //假设所有的属性值运动到了目标值 for(var attr in json){//遍历物体传过来的json值