一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

首页游戏下载软件下载专题资讯教程 php教程 asp.net教程 css教程网页制作网页特效手机开发办公数码

+ -

当前位置：一聚教程网 > 网页特效 > 页面特效

推荐专题

最新下载

1

儿童玩具乐园
68.87MB 类型： 休闲益智
2

辉煌岁月九游版
19.27MB 类型： 体育竞技
3

无双霸业九游版
214.21MB 类型： 角色扮演
4

修复大师
35.95MB 类型： 模拟经营
5

逍遥吟手游
286.69MB 类型： 角色扮演
6

功夫熊猫3最新版
275.41MB 类型： 动作冒险
7

骰子大战
110.51MB 类型： 休闲益智
8

双人恶犬对决
85MB 类型： 休闲益智
9

三傻大冒险
27.62MB 类型： 休闲益智
10

调色大师
102.27MB 类型： 休闲益智

热门教程

1

诛仙2鬼王怎么加点鬼王加点推荐
时间：2025-08-20 类型： 游戏攻略
2

诛仙2见影灵泉奇遇任务怎么做见影灵泉奇遇任务流程攻略
时间：2025-08-20 类型： 游戏攻略
3

三国天下归心诸葛亮怎么样诸葛亮技能介绍一览
时间：2025-08-20 类型： 游戏攻略
4

三国天下归心追击队怎么玩追击队玩法教学
时间：2025-08-20 类型： 游戏攻略
5

三国天下归心武将怎么获得武将获取方法
时间：2025-08-20 类型： 游戏攻略
6

星痕共鸣剧毒蜂巢怎么获取剧毒蜂巢获取攻略
时间：2025-08-20 类型： 游戏攻略
7

新三国志曹操传李儒之影怎么打李儒之影打法教学
时间：2025-08-20 类型： 游戏攻略
8

辉烬队伍怎么搭配配队攻略指南
时间：2025-08-20 类型： 游戏攻略
9

创造吧我们的星球种田玩法怎么玩种田玩法介绍一览
时间：2025-08-20 类型： 游戏攻略
10

华夏千秋怎么表白表白方法一览
时间：2025-08-20 类型： 游戏攻略

js 缓冲运动框架

时间：2022-06-25 20:30:50 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<title> js 单一对象缓冲运动框架</title>
<style type="text/<a href=" http: target="_blank">css">
#box{position:fixed;background:#000;}
#obj{position:absolute;top:90px;background:#FF0;text-align:center;cursor:pointer}
</style>
<script type="text/javascript">
/*
单一对象缓冲运动框架 v1.0
    obj:        运动的对象
    attrs：     对象属性和对象属性的目标值的json集合，例如：{'left':'100px', 'opacity':0.3}
    endfn:      运动结束后的回调函数
*/
function move(obj, attrs, endfn){
    var speed = 40; //运动速率
    function getAttr(obj, attr){    //获取计算后的样式
        var result = getComputedStyle ? getComputedStyle(obj,false)[attr] : obj.currentStyle[attr];
        return parseFloat(result) || 0;
    }
    obj.moveTimer && clearInterval(obj.moveTimer);
    obj.moveTimer = setInterval(function(){
        obj.isAllFinished = true;   //假设已经全部完成了
        for (var attr in attrs){
            var isOpacity = (attr==='opacity'),
                curVal = isOpacity ? parseFloat(getAttr(obj, attr)) : parseInt(getAttr(obj, attr)),
                reqVal = isOpacity ? parseFloat(attrs[attr]) : parseInt(attrs[attr]);
 
            if (curVal!=reqVal){
                obj.isAllFinished = false;  //没有完成
                if (isOpacity) {
                    var val = (reqVal-curVal) * speed,
                        val = val>0 ? Math.ceil(val) : Math.floor(val),
                        val = val ? (curVal*100+val) : (reqVal*100);    //如果经过取整后值等于0，那么直接到达目的地
                    obj.style.opacity = Math.abs(val/100);
                    obj.style.filter = "alpha(opacity="+ val +")";
                } else {
                    var val = ((reqVal-curVal) * speed)/100,
                        val = val>0 ? Math.ceil(val) : Math.floor(val);
                    obj.style[attr] = val ? (curVal+val+'px') : (reqVal+'px');
                }
            }
        }
        if (obj.isAllFinished){
            clearInterval(obj.moveTimer);
            endfn && endfn();   //运动结束后调用传入的函数
        }
    }, 30);
}
/////////////////////////////////////////////////////////////////////////
window.onload = function(){
    var obj = document.getElementById('obj')
    obj.onclick = function(){
        move(obj, {'left':320, 'opacity':0.1}, function(){  //链式运动
            move(obj, {'left':0, 'opacity':1});
        });
    }
}
</script>

<div id="box">
    <div id="obj">Click me !</div>
</div>

提示：您可以先修改部分代码再运行

相关文章

热门栏目