js 和 css動(dòng)畫

qianfeng 發(fā)布于2019-08-29 16:23 / 2212人閱讀

摘要：和動(dòng)畫使用或者使用這兩個(gè)函數(shù)定時(shí)調(diào)用一段代碼。腳本化樣式表開啟和關(guān)閉樣式表和元素的對(duì)象定義了一個(gè)在中可以設(shè)置和查詢的屬性。

js和css動(dòng)畫

使用setTimeout()或者setInterval()使用這兩個(gè)函數(shù)定時(shí)調(diào)用一段代碼。這是其原理。

目的，重復(fù)修改內(nèi)聯(lián)樣式，達(dá)到動(dòng)畫的效果

通過在相同的時(shí)間內(nèi)構(gòu)造出一幀幀的內(nèi)容，然后讓其在函數(shù)的作用下不斷的改變css的值，達(dá)到動(dòng)畫的效果

js寫css動(dòng)畫

// 將e轉(zhuǎn)化為相對(duì)定位的元素，使得其可以左右移動(dòng)
// 第一個(gè)參數(shù)為元素對(duì)象或者元素的id
// 如果第二個(gè)參數(shù)是函數(shù)，以e為參數(shù)，它將在動(dòng)畫結(jié)束時(shí)調(diào)用
// 第三個(gè)參數(shù)指定e移動(dòng)的距離，默認(rèn)為5像素
// 第四個(gè)參數(shù)指定移動(dòng)多久，默認(rèn)500毫秒
function shake(e, oncomplete, distance, time) {
    // 句柄函數(shù)
    if (typeof e === "string") e = document.getElemnentById(e);    // 如果傳入的是對(duì)象的id則獲取對(duì)象的id，如果傳入的為元素（元素為對(duì)象）則直接跳過這一句
    if (!time) time = 500;    // 如果time是空值，則直接使用默認(rèn)值
    if (!distance) distance = 5;    // 如果未指定移動(dòng)的距離，則默認(rèn)為5像素

    var originalStyle = e.style.cssText;    // 獲取元素e的css樣式
    e.style.position = "relative";    // 設(shè)置為相對(duì)定位
    var start = (new Date()).getTime();    // 設(shè)置動(dòng)畫開始的時(shí)間,獲取一個(gè)格林威治時(shí)間
    animate();    // 動(dòng)畫開始

    // 函數(shù)檢查消耗時(shí)間，并更新e的位置
    // 如果動(dòng)畫完成，它將e還原為原始狀態(tài)
    // 否則，將會(huì)更新e的位置，安排其自身重新運(yùn)行
    function animate() {
        var now = (new Date()).getTime();    // 獲取現(xiàn)在的時(shí)間
        var elapsed = now-start;    // 從開始以來消耗了多長(zhǎng)時(shí)間
        var fraction = elapsed / time;    // 為總時(shí)間的幾分之幾

        if (fraction < 1) {    // 如果動(dòng)畫未完成
            // 作為動(dòng)畫完成比例的函數(shù)，計(jì)算e的x位置
            // 使用正弦函數(shù)將完成比例乘以4pi
            // 所以，它將來回往返兩次
            var x = distance * Math.sin(fraction * 4 * Math.PI);     // 使用正弦函數(shù)實(shí)現(xiàn)每秒四幀
            e.style.left = x + "px";

            // 在25毫秒后或在總時(shí)間的最后嘗試再次運(yùn)行函數(shù)
            // 目的是為了產(chǎn)生每秒40幀動(dòng)畫
            setTimeout(animate, Math.min(25, time-elapsed));    // 使用天花板函數(shù)再次調(diào)用，再次移動(dòng)
        }
        else {    // 否則動(dòng)畫完成
            e.style.cssText = originalStyle; // 恢復(fù)原始樣式
            if (oncomplete) oncomplete(e);    // 產(chǎn)生一個(gè)回調(diào)函數(shù)
        }
    }
}

// 以毫秒級(jí)的時(shí)間將e從完全不透明淡出到完全透明
// 在調(diào)用函數(shù)時(shí)假設(shè)e是完全不透明的
// oncomplete 是一個(gè)可選函數(shù)，以e為參數(shù)，它將在動(dòng)畫結(jié)束的時(shí)調(diào)用
// 如果不指定time，默認(rèn)為500毫秒
function fadeOut(e, oncomplete, time) {
    if (typeof e === "string") e = document.getElementById(e);
    if (!time) time = 500;

    // 使用Math.sqrt作為一個(gè)緩動(dòng)函數(shù)創(chuàng)建動(dòng)畫
    // 非線性函數(shù)，一開始淡出的較快，然后逐步的緩慢
    var ease = Math.sqrt;

    var start = (new Date()).getTime();    // 動(dòng)畫開始的時(shí)間
    animate();    // 動(dòng)畫開始

    function animate() {
        var elapsed = (new Date()).getTime()-start;    // 消耗的時(shí)間
        var fraction = elapsed/time;    // 總時(shí)間的幾分之幾

        if (fraction < 1) {    // 如果動(dòng)畫未完成
            var opacity = 1 - ease(fraction);    // 計(jì)算不透明度  即 完成一次變換，開方
            e.style.opacity = String(opacity);    // 設(shè)置透明度
            setTimeout(animate, // 進(jìn)行下一幀
                Math.min(25, time-elapsed));    // 在25毫秒之后或者在總時(shí)間的最后再次調(diào)用
        }else {
            e.style.opacity = "0";    // 使得e完全透明
            if (oncomplete) oncomplete(e);    // 在結(jié)束的時(shí)候回調(diào)
        }
    }
}

查詢計(jì)算出的樣式

getComputedStyle(e)

275個(gè)樣式。。。O__O "…

腳本化css類

除了能腳本化內(nèi)聯(lián)樣式，同樣的也能腳本化css的類

移除，添加類

e.className = "attention";  // 添加類
e.className = "";   // 移除類

顯示類列表

classList
只讀屬性，返回元素類屬性的實(shí)時(shí)集合。

e.classList()

腳本化樣式表 開啟和關(guān)閉樣式表

style和link元素的CSSStyleSheet對(duì)象定義了一個(gè)在js中可以設(shè)置和查詢的disabled屬性。

關(guān)于disabled屬性，該屬性在HTML中不屬于規(guī)范的一部分，在HTML中不存在，但是，在DOM中存在該屬性。在標(biāo)簽中無法設(shè)置該屬性，但是可以在腳本中設(shè)置該屬性

如果值為true，樣式表關(guān)閉，否則樣式表打開

e.disabled = true;

這樣樣式表即可關(guān)閉。

類似的通過以下方式也可

document.styleSheets[0].disabled;

查詢，插入與刪除樣式表規(guī)則

CSSStyleSheet對(duì)象同樣也定義了用來查詢，插入和刪除樣式表規(guī)則的api

查詢所有樣式表內(nèi)容

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

document.styleSheets[0] 一個(gè)只讀屬性，返回一個(gè)該文檔的鏈接或嵌入的樣式表

該樣式只讀，不可進(jìn)行插入和刪除

其中selectorText為css選擇器
cssText 為css的文本樣式

添加和刪除規(guī)則

insertRule()和deleteRule()這兩種方法，達(dá)到添加和刪除規(guī)則
還有一個(gè)addRule()方法

insertRule()方法

insertRule()和deleteRule()這兩種方法，達(dá)到添加和刪除規(guī)則

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

在ss樣式表中，在第0條cssRules中添加一條css規(guī)則。使得類為name的字體變藍(lán)
如果添加的索引已經(jīng)存在則不會(huì)覆蓋，所有的索引加1，然后進(jìn)行插入

deleteRule()方法

刪除樣式規(guī)則
刪除上一條插入的樣式

ss.deleteRule(0);

刪除第0條規(guī)則，樣式繼續(xù)保持從0開始

創(chuàng)建新的樣式表

這個(gè)不難，直接插入一個(gè)新的style元素通過innerHTML的方式將其插入新的css內(nèi)容，或者直接插入link標(biāo)簽，設(shè)置添加一個(gè)html的屬性使用的是 Element.setAttritube()方法，將rel的值設(shè)置為stylesheet 然后在用同樣的方法添加src屬性

純粹的dom 和 bom的操作，不涉及任何樣式表的內(nèi)容

GPU云服務(wù)器云服務(wù)器 js+css和jsp js和css內(nèi)聯(lián)外聯(lián) js和css效果圖 css3動(dòng)畫

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113714.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

qianfeng

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

目前可以用的短信驗(yàn)證碼平臺(tái)哪個(gè)比較好？

閱讀 4223·2021-11-22 13:52
主機(jī)服務(wù)器地址是什么-服務(wù)器地址填什么？

閱讀 2114·2021-09-22 15:12
談一談移動(dòng)端1px的問題

閱讀 1158·2019-08-30 15:53
一年內(nèi)經(jīng)驗(yàn)前端面試題記錄

閱讀 3485·2019-08-29 17:12
js 和 css動(dòng)畫

閱讀 2213·2019-08-29 16:23
React造輪系列：對(duì)話框組件 - Dialog 思路

閱讀 1693·2019-08-26 13:56
微信小程序緩存過期時(shí)間

閱讀 1798·2019-08-26 13:44
ES6中Promise 承諾對(duì)象封裝異步操作解析

閱讀 1915·2019-08-26 11:56

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

js 和 css動(dòng)畫

insertRule()方法

deleteRule()方法

相關(guān)文章

可能是最全的前端動(dòng)效庫匯總

**JavaScript是如何工作的: CSS 和 JS 動(dòng)畫底層原理及如何優(yōu)化它們的性能**

**使用Move.js創(chuàng)建CSS3動(dòng)畫**

**前端動(dòng)畫調(diào)研-V1**

[練習(xí)]利用CSS steps 實(shí)現(xiàn)逐幀動(dòng)畫

11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫

發(fā)表評(píng)論

0條評(píng)論

qianfeng

男|高級(jí)講師

TA的文章

目前可以用的短信驗(yàn)證碼平臺(tái)哪個(gè)比較好？

主機(jī)服務(wù)器地址是什么-服務(wù)器地址填什么？

談一談移動(dòng)端1px的問題

一年內(nèi)經(jīng)驗(yàn)前端面試題記錄