js和css动画

运用setTimeout()或许setInterval()运用这两个函数定时挪用一段代码。这是其道理。

目标，反复修正内联款式，到达动画的结果

经由过程在雷同的时刻内构造出一帧帧的内容，然后让其在函数的作用下不停的转变css的值，到达动画的结果

js写css动画

// 将e转化为相对定位的元素，使得其能够摆布挪动
// 第一个参数为元素对象或许元素的id
// 假如第二个参数是函数，以e为参数，它将在动画完毕时挪用
// 第三个参数指定e挪动的间隔，默以为5像素
// 第四个参数指定挪动多久，默许500毫秒
function shake(e, oncomplete, distance, time) {
    // 句柄函数
    if (typeof e === "string") e = document.getElemnentById(e);    // 假如传入的是对象的id则猎取对象的id，假如传入的为元素（元素为对象）则直接跳过这一句
    if (!time) time = 500;    // 假如time是空值，则直接运用默许值
    if (!distance) distance = 5;    // 假如未指定挪动的间隔，则默以为5像素

    var originalStyle = e.style.cssText;    // 猎取元素e的css款式
    e.style.position = "relative";    // 设置为相对定位
    var start = (new Date()).getTime();    // 设置动画最先的时刻,猎取一个格林威治时刻
    animate();    // 动画最先

    // 函数搜检斲丧时刻，并更新e的位置
    // 假如动画完成，它将e还原为原始状况
    // 不然，将会更新e的位置，部署其本身从新运转
    function animate() {
        var now = (new Date()).getTime();    // 猎取如今的时刻
        var elapsed = now-start;    // 从最先以来斲丧了多长时刻
        var fraction = elapsed / time;    // 为总时刻的几分之几

        if (fraction < 1) {    // 假如动画未完成
            // 作为动画完成比例的函数，盘算e的x位置
            // 运用正弦函数将完成比例乘以4pi
            // 所以，它将往复往复两次
            var x = distance * Math.sin(fraction * 4 * Math.PI);     // 运用正弦函数完成每秒四帧
            e.style.left = x + "px";

            // 在25毫秒后或在总时刻的末了尝试再次运转函数
            // 目标是为了发生每秒40帧动画
            setTimeout(animate, Math.min(25, time-elapsed));    // 运用天花板函数再次挪用，再次挪动
        }
        else {    // 不然动画完成
            e.style.cssText = originalStyle; // 恢复原始款式
            if (oncomplete) oncomplete(e);    // 发生一个回调函数
        }
    }
}

// 以毫秒级的时刻将e从完整不通明淡出到完整通明
// 在挪用函数时假定e是完整不通明的
// oncomplete 是一个可选函数，以e为参数，它将在动画完毕的时挪用
// 假如不指定time，默以为500毫秒
function fadeOut(e, oncomplete, time) {
    if (typeof e === "string") e = document.getElementById(e);
    if (!time) time = 500;

    // 运用Math.sqrt作为一个缓动函数建立动画
    // 非线性函数，一最先淡出的较快，然后逐渐的迟缓
    var ease = Math.sqrt;

    var start = (new Date()).getTime();    // 动画最先的时刻
    animate();    // 动画最先

    function animate() {
        var elapsed = (new Date()).getTime()-start;    // 斲丧的时刻
        var fraction = elapsed/time;    // 总时刻的几分之几

        if (fraction < 1) {    // 假如动画未完成
            var opacity = 1 - ease(fraction);    // 盘算不通明度  即 完成一次变更，开方
            e.style.opacity = String(opacity);    // 设置通明度
            setTimeout(animate, // 举行下一帧
                Math.min(25, time-elapsed));    // 在25毫秒以后或许在总时刻的末了再次挪用
        }else {
            e.style.opacity = "0";    // 使得e完整通明
            if (oncomplete) oncomplete(e);    // 在完毕的时刻回调
        }
    }
}

查询盘算出的款式

getComputedStyle(e)

275个款式。。。O__O “…

剧本化css类

除了能剧本化内联款式，一样的也能剧本化css的类

移除，增加类

e.className = "attention";  // 增加类
e.className = "";   // 移除类

显现类列表

classList
只读属性，返回元素类属性的及时鸠合。

e.classList()

剧本化款式表

开启和封闭款式表

style和link元素的CSSStyleSheet对象定义了一个在js中能够设置和查询的disabled属性。

关于disabled属性，该属性在HTML中不属于范例的一部分，在HTML中不存在，然则，在DOM中存在该属性。在标签中没法设置该属性，然则能够在剧本中设置该属性

假如值为true，款式表封闭，不然款式表翻开

e.disabled = true;

如许款式表即可封闭。

相似的经由过程以下体式格局也可

document.styleSheets[0].disabled;

查询，插进去与删除款式表划定规矩

CSSStyleSheet对象一样也定义了用来查询，插进去和删除款式表划定规矩的api

查询一切款式表内容

var firstRule = document.styleSheets[0].cssRules[0];

document.styleSheets[0] 一个只读属性，返回一个该文档的链接或嵌入的款式表

该款式只读，不可举行插进去和删除

个中selectorText为css选择器
cssText 为css的文本款式

增加和删除划定规矩

insertRule()和deleteRule()这两种要领，到达增加和删除划定规矩
另有一个addRule()要领

insertRule()要领

insertRule()和deleteRule()这两种要领，到达增加和删除划定规矩

ss.insertRule(".name {color:blue}", 0);

在ss款式表中，在第0条cssRules中增加一条css划定规矩。使得类为name的字体变蓝
假如增加的索引已存在则不会掩盖，一切的索引加1，然后举行插进去

deleteRule()要领

删除款式划定规矩
删除上一条插进去的款式

ss.deleteRule(0);

删除第0条划定规矩，款式继承坚持从0最先

建立新的款式表

这个不难，直接插进去一个新的style元素经由过程innerHTML的体式格局将其插进去新的css内容，或许直接插进去link标签，设置增加一个html的属性运用的是 Element.setAttritube()要领，将rel的值设置为stylesheet 然后在用一样的要领增加src属性

地道的dom 和 bom的操纵，不触及任何款式表的内容