链式动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式动画</title>
    <style>
        body,div{
            margin: 0;
            padding:0;
        }
        #div1{
            width:200px;
            height:100px;
            background-color:yellow;
            border:4px solid #000;
            opacity:0.3;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv =document.getElementById(‘div1‘);
            oDiv.onmouseover =function(){
                startMove(oDiv,‘width‘,400,function(){
                    startMove(oDiv,‘height‘,300,function(){
                        startMove(oDiv,‘opacity‘,100);
                    });
                });
            };
            oDiv.onmouseout = function(){
                startMove(oDiv,‘opacity‘,30,function(){
                    startMove(oDiv,‘height‘,100,function(){
                        startMove(oDiv,‘width‘,200);
                    })
                })
            }
        }

        function startMove(obj,attr,iTarget,fn){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){

                var icur = null;                // 1.属性值 变量
                if(attr == ‘opacity‘){
                    icur = Math.round(parseFloat(getStyle(obj,attr))*100);
                }else{
                    icur = parseInt(getStyle(obj,attr));
                }

                var speed = (iTarget - icur)/8;  // 2.速度 变速
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                if(icur == iTarget){             // 3.判断是否暂停 变化过程
                    clearInterval(obj.timer);
                    if(fn){                      //链式
                        fn();
                    }
                }else{
                    if(attr == ‘opacity‘){
                        obj.style.opacity = (icur +speed)/100;
                    }else{
                        obj.style[attr] = icur + speed + ‘px‘;
                    }
                }
            },30)
        }

        function getStyle(obj,attr){             //获取任意属性
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/Fourteen-Y/p/11957896.html

时间: 2024-11-08 04:26:09

链式动画的相关文章

js链式动画小例子

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>链式动画</title> <style> * { margin: 0; padding: 0; } #odiv { width: 100px; height: 100px; background: pink; opacity: 0.5; } </style> </hea

js原生实现链式动画效果

// 1. css样式 div { width: 100px; height: 100px; background: olivedrab; position: absolute; left: 0px; opacity: 1; } .top { top: 100px; } .bottom { top: 300px; } // html和JavaScript代码 <div class="top"></div> <div class="bottom&q

UESTC30-最短路-Floyd最短路、spfa+链式前向星建图

最短路 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) 在每年的校赛里,所有进入决赛的同学都会获得一件很漂亮的T-shirt.但是每当我们的工作人员把上百件的衣服从商店运回到赛场的时候,却是非常累的!所以现在他们想要寻找最短的从商店到赛场的路线,你可以帮助他们吗? Input 输入包括多组数据. 每组数据第一行是两个整数NN ,MM (N≤100N≤100 ,M≤10000M≤1000

二叉树的链式存储结构----二叉链表

头文件:head.h #include<string.h> #include<ctype.h> #include<malloc.h> /* malloc()等 */ #include<limits.h> /* INT_MAX等 */ #include<stdio.h> /* EOF(=^Z或F6),NULL */ #include<stdlib.h> /* atoi() */ #include<io.h> /* eof()

数据结构Java实现05----栈:顺序栈和链式堆栈

数据结构Java实现05----栈:顺序栈和链式堆栈 一.堆栈的基本概念: 堆栈(也简称作栈)是一种特殊的线性表,堆栈的数据元素以及数据元素间的逻辑关系和线性表完全相同,其差别是线性表允许在任意位置进行插入和删除操作,而堆栈只允许在固定一端进行插入和删除操作. 先进后出:堆栈中允许进行插入和删除操作的一端称为栈顶,另一端称为栈底.堆栈的插入和删除操作通常称为进栈或入栈,堆栈的删除操作通常称为出栈或退栈. 备注:栈本身就是一个线性表,所以我们之前讨论过线性表的顺序存储和链式存储,对于栈来说,同样适

4-3 求链式表的表长 (10分)

本题要求实现一个函数,求链式表的表长. 函数接口定义: int Length( List L ); 其中List结构定义如下: typedef struct LNode *PtrToLNode; struct LNode { ElementType Data; PtrToLNode Next; }; typedef PtrToLNode List; L是给定单链表,函数Length要返回链式表的长度. 裁判测试程序样例: #include <stdio.h> #include <stdl

C++中的链式操作

代码编译环境:Windows7 32bits+VS2012. 1.什么是链式操作 链式操作是利用运算符进行的连续运算(操作).它的特点是在一条语句中出现两个或者两个以上相同的操作符,如连续的赋值操作.连续的输入操作.连续的输出操作.连续的相加操作等都是链式操作的样例. 链式操一定涉及到结合律的问题.比如链式操作赋值操作满足右结合律,即a=b=c被解释成a=(b=c).而链式输出操作原则满足左结合律,即cout<<a<<b被解释成(cout<<a)<<b,基本

链式前向星

重要的事情说三遍 明天不学会链式前向星我绝食三天

javaScript函数式编程-包含闭包、链式优化及柯里化

本文着重介绍个人理解的函数式编程. 函数式编程个人理解为:以函数为主要载体的编程方式. 好处: 语义更加清晰 可复用性高 可维护性好 作用域局限.副作用少 基本函数式编程: //实现数组中每个单词首字母大写 //一般写法 const arr = ['apple','orange','pear']; for(const i in arr) { const c = arr[i][0]; arr[i] = c.toUpperCase() + arr[i].slice(1); //slice()从已有的